Encuentra todos los elementos con un determinado valor de atributo en jquery

88

Necesito encontrar todos los elementos que tengan un valor de atributo especial.

Aquí está el div que necesito encontrar (tengo muchos de ellos ..)

<div imageId='imageN'>...

Simplemente necesito recorrer los divs que tienen imageId='imageN'

jquery

— Pabuc
fuente

6

Recomendaría usarlo class="imageN"por el bien de HTML válido. O eso o data-imageId="imageN"por el bien de HTML5 válido. Con el primero, podría usar el selector de clases.

— Andy E

Andy, la razón detrás de esto es que estos divs se agregan dinámicamente desde el código subyacente y tienen diferentes ImageIds pero la misma clase '.

— Pabuc

3

Puedes tener varias clases class="image imageN"si eso ayuda.

— Val

¿Por qué no seleccionar el nombre de la clase si ya tienen la misma clase?

— Praxis Ashelin

142

$('div[imageId="imageN"]').each(function() {
    // `this` is the div
});

Para verificar la existencia exclusiva del atributo, sin importar qué valor, puede usar este selector en su lugar: $('div[imageId]')

— ThiefMaster
fuente

4

@ThiefMaster: si el valor del atributo no es constante (es decir, variará), ¿cómo encontrarlo?

— Desarrollador

un par de preguntas: 1- ¿qué pasa con otros elementos ... 2- qué hay con otros valores ... podría tener el atributo data-food en muchos elementos: div's, img's y a td's, donde cada uno tiene un valor diferente.

— dsdsdsdsd

@ParthoGanguly Utiliza una variable de esta manera: $ ('div [imageId = "' + variableName + '"]')

— Kama

1

Esta solución no responde realmente al título de esta página. Está buscando elementos que sean divs. Una solución adecuada es aquella que es independiente del elemento real.

— AndroidDev

164

Aunque no responde con precisión a la pregunta, llegué aquí cuando buscaba una forma de obtener la colección de elementos (nombres de etiquetas potencialmente diferentes) que simplemente tenían un nombre de atributo dado (sin filtrar por valor de atributo). Descubrí que lo siguiente funcionó bien para mí:

$("*[attr-name]")

Espero que ayude a alguien que aterrice en esta página buscando lo mismo que yo :).

Actualización: Parece que el asterisco no es obligatorio, es decir, según algunas pruebas básicas, lo siguiente parece ser equivalente a lo anterior (gracias a Matt por señalar esto):

$("[attr-name]")

— sammy34
fuente

¡Perfecto! Justo lo que estaba buscando.

— Paulius Matulionis

Posiblemente ... No verifiqué el aspecto del rendimiento (no era un factor importante para mi uso en ese momento).

— sammy34

3

¿Hay alguna diferencia entre eso y $("[attr-name]")? (es decir, no *)

— Mateo

Sí, hay cierta diferencia entre ellos. error de aumento de notación estrella en Firefox !!!! (Unescaped ...)

— ozz

agregando a esto, también puede incluir un valor de atributos, por ejemplo:$("[data-toggle='modal']")

— MeltingDog

12

No se llama etiqueta; lo que está buscando se llama atributo html.

$('div[imageId="imageN"]').each(function(i,el){
  $(el).html('changes');
  //do what ever you wish to this object :) 
});

— Val
fuente

5

Puede usar el valor parcial de un atributo para detectar un elemento DOM usando el signo (^). Por ejemplo, tienes divs como este:

<div id="abc_1"></div>
<div id="abc_2"></div>
<div id="xyz_3"></div>
<div id="xyz_4"></div>...

Puedes usar el código:

var abc = $('div[id^=abc]')

Esto devolverá una matriz DOM de divs que tienen una identificación que comienza con abc:

<div id="abc_1"></div>
<div id="abc_2"></div>

Aquí está la demostración: http://jsfiddle.net/mCuWS/

— Krunal
fuente

4

Utilice la concatenación de cadenas. Prueba esto:

$('div[imageId="'+imageN +'"]').each(function() {
    $(this);   
});

— LostSenSS
fuente