Seleccionar elementos por atributo


253

Tengo una colección de casillas de verificación con identificadores generados y algunos de ellos tienen un atributo adicional. ¿Es posible usar JQuery para verificar si un elemento tiene un atributo específico? Por ejemplo, ¿puedo verificar si el siguiente elemento tiene el atributo "myattr"? El valor del atributo puede variar.

<input type="checkbox" id="A" myattr="val_attr">A</input>

Por ejemplo, ¿cómo puedo obtener una colección de todas las casillas de verificación que tienen este atributo sin marcar una por una? es posible?


2
Por otro lado, una <input /> es una etiqueta vacía que no debe tener contenido dentro de ella. Tal vez no esté preocupado por validar, ya que tiene myatttr presente ...
ScottE


Si ya tiene una colección y desea filtrar solo elementos con un atributo específico, simplemente hágalo$filtered = $collection.filter('[attribute_name]');
jave.web

Respuestas:


190

¿Quieres decir que puedes seleccionarlos? Si es así, entonces sí:

$(":checkbox[myattr]")

44
Tenga en cuenta que si está probando la existencia (presumiblemente en una declaración if, por ejemplo), probablemente sea más correcto / confiable: if ($ (": checkbox [myattr]"). Length ()> 0) ...
rinogo

14
@rinogo: en realidad todo lo que necesitas es if ($ (": casilla de verificación [myattr]"). length). El () después de la longitud no es necesario, tampoco lo es> 0, 0 se evalúa como falso en las pruebas de igualdad que no requieren igualdad estricta (valor y tipo).
bmarti44

1
Lanza errores js si intenta algo como: td [myattr]. Así que creo que esta característica estaba dirigida específicamente a las casillas de verificación.
engañadoporprimes

66
Los dos puntos seleccionan pseudo-clases, determinadas por el tipo attr. Para aplicar lo mismo a los td, simplemente omita los dos puntos.
dhochee

O si desea ver si algo no tiene un atributo, como buscar todos los enlaces que no tienen hrefatributos. $("#myBox").find('a').filter(':not([href])')
timbrown

368
if ($('#A').attr('myattr')) {
    // attribute exists
} else {
    // attribute does not exist
}

EDITAR:

Lo anterior caerá en la elserama-cuando myattrexiste pero es una cadena vacía o "0". Si ese es un problema, debes probarlo explícitamente undefined:

if ($('#A').attr('myattr') !== undefined) {
    // attribute exists
} else {
    // attribute does not exist
}

3
No es una gran respuesta. "undefined" no es una palabra clave en Javascript. Ver constc.blogspot.com/2008/07/…
mhenry1384

16
Tienes razón ... Pero redefinir undefinedse considera un caso marginal y la comparación anterior funcionará en el 99% de todos los casos.
Stefan Gehrig

66
No funciona si el atributo tiene una cadena vacía. Un ejemplo es myattr = ''
mythicalprogrammer

3
@mhenry - entonces estarías en un error :) Si estuvieras construyendo el proyecto para mí o junto a mí, te pediría que arregles tu error. Si se tratara de un paquete de código abierto, yo (junto con muchos usuarios) dejaría de usarlo debido a que estaba mal codificado. Si no lo cambió, alguien más eventualmente bifurcaría una versión sin el error y la gente lo usaría en su lugar, y usted perdería su propio proyecto, como ha sucedido muchas veces antes cuando alguien crea un paquete que es una buena idea con mala implementación De cualquier manera, le enseñaría una lección sobre las prácticas de codificación :)
Jimbo Jonny

8
if (typeof $ ('# A'). attr ('myattr')! == 'undefined')
James Westgate

166

Sé que ha pasado mucho tiempo desde que se hizo la pregunta, pero encontré que el cheque es más claro de esta manera:

if ($("#A").is('[myattr]')) {
    // attribute exists
} else {
    // attribute does not exist
}

(Como se encuentra en este sitio aquí )

La documentación sobre se puede encontrar aquí


Según el W3C, los atributos booleanos se definen por la presencia o ausencia del atributo. jQuery proporciona el método .attr () para manipular los valores de los atributos. Pero, ¿cómo agregamos un atributo sin valor? El método que proporciona para probar la presencia de un atributo no se describe en la documentación de jQuery (1.8.2). ¿Sabes cómo agregar un atributo con jQuery?
Chmike

@chmike Para agregar un atributo, lo haría de esta manera: $ ("# A"). prop ("myNewAttribute", someValue); Puede darle a algún valor cualquier valor de su elección: cadena, número, cadena vacía, verdadero / falso.
Jonathan Bergeron

Esto agregará el atributo con un valor asignado que no es lo mismo que un atributo sin valor.
Chmike

55
Estoy de acuerdo, esta es la mejor respuesta (usando jQuery): muy clara y concisa. Me pregunté por qué jQuery no solo tiene una función hasAttribute (), y la respuesta es que JavaScript nativo ya tiene una. Cualquier elemento Dom HTML tiene un método hasAttribute ('attributeName'). Entonces podría hacer: $ ('# A') [0] .hasAttribute ('myattr') @chmike - No creo que pueda agregar un atributo vacío usando las funciones jQuery, pero puede hacerlo con el elemento HTML Dom objeto de una manera similar a la siguiente: $ ("# A") [0] .setAttributeNode (document.createAttribute ("myNewAttribute"));
Daniel Howard

1
Solo un comentario que me gusta esta respuesta, pero estaba confundido acerca de los comentarios preguntando cómo agregar un atributo sin un valor. Estos no están relacionados con la pregunta o la respuesta.
goodeye

9

Esto funcionará:

$('#A')[0].hasAttribute('myattr');


@RetroCoder, ¿cuál es su punto sobre su enlace? Esta prueba parece bastante buena, especialmente porque a menudo la usas $(this).<something>cuando puedes hacerlo this.hasAttribute('...')directamente (y no te interesan los navegadores antiguos, por supuesto).
Alexis Wilke

8

En JavaScript, ...

null == undefined

... devuelve true*. Es la diferencia entre ==y ===. Además, el nombre undefinedse puede definir (no es una palabra clave como nulles), por lo que es mejor verificar de otra manera. La forma más confiable es probablemente comparar el valor de retorno del typeofoperador.

typeof o == "undefined"

Sin embargo, comparar a nulo debería funcionar en este caso.

* Suponiendo undefinedque de hecho no está definido.


Indefinido no es una palabra clave reservada en JavaScript. En jQuery es posible mezclar su nombre exactamente porque está construido con el constructor "var" y no está valorado. En la parte superior del código de la biblioteca mágica, de hecho, hay una línea que dice "var undefined"; y de esta manera se define una variable indefinida con ese nombre en el ámbito de jQuery ... Pero de todos modos podría denominarse "sin nombre" escribiendo "var unnamed;"
Emanuele Del Grande

1
Esto no busca un atributo, esta verificación de una propiedad en un objeto javascript ¿por qué tiene 6 votos a favor?
ncubica

5

$("input[attr]").length Podría ser una mejor opción.


4

Se lanzaron un par de ideas usando "typeof", jQuery ".is" y ".filter", así que pensé en publicar una comparación rápida de ellas. El typeof parece ser la mejor opción para esto. Si bien los demás funcionarán, parece haber una clara diferencia de rendimiento al invocar la biblioteca jq para este esfuerzo.


2
if (!$("#element").attr('my_attr')){
  //return false
  //attribute doesn't exists
}

1
esto probablemente no funcionará, ya que puede agregar un atributo sin valor. en tal caso, esta condición pasará, aunque el comportamiento deseado podría ser devolver verdadero, el atributo está establecido. similar a PHP isset()o por ejemplo en js $("#element").attr('my_attr') === false,
ulkas

2

como en esta publicación , usando .isy el selector de atributos [], puede agregar fácilmente una función (o prototipo):

function hasAttr($sel,attr) {
    return $sel.is('['+attr+']');
}


1

simplemente:

$('input[name*="value"]')

más información: documentos oficiales


1
Comillas dobles sin escapes dentro de la cadena definida con comillas dobles, no una cadena válida. Desafortunadamente, no puedo editarlo porque una edición tiene que cambiar 6 caracteres o más, aunque debe cambiarse.
Jimbo Jonny el

0

Además de seleccionar todos los elementos con un atributo $('[someAttribute]')o $('input[someAttribute]')también puede usar una función para realizar comprobaciones booleanas en un objeto, como en un controlador de clic:

if(! this.hasAttribute('myattr') ) { ...


0

He creado el paquete npm con el comportamiento previsto como se describe anteriormente en cuestión.

Enlace a [npm] y [github]

El uso es muy simple. Por ejemplo:

<p id="test" class="test">something</p>
$("#test").hasAttr("class")

devuelve verdadero

Funciona con camelcase también.


0

Para seleccionar elementos que tengan un determinado atributo, consulte las respuestas anteriores.

Para determinar si un elemento jQuery dado tiene un atributo específico, estoy usando un pequeño complemento que devuelve truesi el primer elemento de la colección ajQuery tiene este atributo:

/** hasAttr
 ** helper plugin returning boolean if the first element of the collection has a certain attribute
 **/
$.fn.hasAttr = function(attr) {
   return 0 < this.length
       && 'undefined' !== typeof attr
       && undefined !== attr
       && this[0].hasAttribute(attr)
}

-5

JQuery devolverá el atributo como una cadena. Por lo tanto, puede verificar la longitud de esa cadena para determinar si está establecida:

if ($("input#A").attr("myattr").length == 0)
 return null;
else
 return $("input#A").attr("myattr");

Entonces, sé que ha pasado más de un año y debería haberlo abordado hace mucho tiempo. Tengo curiosidad acerca de qué parte no funcionó? Si supiera que solo estás tratando de seleccionarlos, no habría dado el código anterior. Pensé que querías revisarlos individualmente. De hecho, JQuery devuelve el atributo como una cadena y puede verificar la longitud de esa cadena como cualquier otra cadena. Por lo tanto, siempre que su selector y atributo sean correctos, debería haber podido probar para ver si una entrada en particular tenía ese atributo. De todos modos, simplemente no quería que la gente descartara el principio porque funciona.
zach

66
fallará en el caso en que el atributo no esté presente en cuyo caso $ ("input # A"). attr ("myattr") devuelve undefined en lugar de una cadena y undefined.length fallará
Rune FS

Solo detecta un atributo vacío frente a uno con contenido, falla en un atributo no existente. La pregunta original era sobre la detección de la existencia del atributo, convirtiéndolo en un fracaso como respuesta a la pregunta.
Jimbo Jonny el
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.