Encontre todos os elementos com um determinado valor de atributo em jquery

88

Preciso encontrar todos os elementos que possuem um valor de atributo especial.

Aqui está o div que preciso encontrar (tenho muitos deles ..)

<div imageId='imageN'>...

Eu simplesmente preciso percorrer os divs que têm imageId='imageN'

jquery

— Pabuc
fonte

6

Eu recomendo usar class="imageN"por uma questão de HTML válido. Isso ou data-imageId="imageN"por uma questão de HTML5 válido. Com o primeiro, você poderá usar o seletor de classes.

— Andy E de

Andy, a razão por trás disso é que esses divs são adicionados dinamicamente a partir do code-behind e têm ImageIds diferentes, mas a mesma classe '.

— Pabuc de

3

você pode ter várias classes class="image imageN"se isso ajudar.

— Val

Por que não selecionar o nome da classe se eles já tiverem a mesma classe?

— Praxis Ashelin

140

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

Para verificar a existência exclusiva do atributo, não importa qual valor, você pode usar este seletor: $('div[imageId]')

— ThiefMaster
fonte

4

@ThiefMaster - Se o valor do atributo não for constante (ou seja, ele irá variar), como encontrá-lo?

— Desenvolvedor

algumas perguntas: 1- e quanto a outros elementos ... 2- e outros valores ... Eu posso ter o atributo data-food em muitos elementos: div's, img's e a td's, onde cada um tem um valor diferente.

— dsdsdsdsd

@ParthoGanguly Você usa uma variável desta forma: $ ('div [imageId = "' + variableName + '"]')

— Kama

1

Esta solução realmente não responde ao título desta página. Você está procurando por elementos que são divs. Uma solução adequada é aquela que é agnóstica em relação ao elemento real.

— AndroidDev

162

Embora não responda com precisão à pergunta, cheguei aqui ao procurar uma maneira de obter a coleção de elementos (nomes de tags potencialmente diferentes) que simplesmente tinham um determinado nome de atributo (sem filtrar por valor de atributo). Descobri que o seguinte funcionou bem para mim:

$("*[attr-name]")

Espero que ajude alguém que por acaso pousou nesta página procurando a mesma coisa que eu :).

Atualização: Parece que o asterisco não é necessário, ou seja, com base em alguns testes básicos, o seguinte parece ser equivalente ao acima (obrigado a Matt por apontar isso):

$("[attr-name]")

— sammy34
fonte

Perfeito! É mesmo o que eu procurava.

— Paulius Matulionis

Muito possivelmente ... Não verifiquei o aspecto do desempenho (não era um fator importante para o meu uso na altura).

— sammy34

3

Existe alguma diferença entre isso e $("[attr-name]")? (ou seja, não *)

— Mateus,

Sim, há certa diferença entre eles. erro de aumento de notação de estrela no firefox !!!! (Sem escape ...)

— ozz

adicionando a isso, você também pode incluir um valor de atributos, por exemplo:$("[data-toggle='modal']")

— MeltingDog

12

Não é chamado de tag; o que você está procurando é chamado de atributo html.

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

— Val
fonte

5

Você pode usar o valor parcial de um atributo para detectar um elemento DOM usando o sinal (^). Por exemplo, você tem divs como este:

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

Você pode usar o código:

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

Isso retornará uma matriz DOM de divs que têm id começando com abc:

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

Aqui está a demonstração: http://jsfiddle.net/mCuWS/

— Krunal
fonte

4

Use a concatenação de string. Experimente isto:

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

— LostSenSS
fonte