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'

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

Respostas:

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