Trouver tous les éléments avec une certaine valeur d'attribut dans jquery

88

J'ai besoin de trouver tous les éléments qui ont une valeur d'attribut spéciale.

Voici la div que j'ai besoin de trouver (j'en ai beaucoup ..)

<div imageId='imageN'>...

J'ai simplement besoin de parcourir les divs qui ont imageId='imageN'

jquery

— Pabuc
source

6

Je recommande d'utiliser class="imageN"pour le bien du HTML valide. Soit cela, soit data-imageId="imageN"pour un HTML5 valide. Avec le premier, vous pourrez utiliser le sélecteur de classe.

— Andy E

Andy, la raison derrière cela est que ces divs sont ajoutés dynamiquement à partir du code-behind et ont des ImageIds différents mais la même classe '.

— Pabuc

3

Vous pouvez avoir plusieurs classes class="image imageN"si cela vous aide.

— Val

Pourquoi ne pas sélectionner sur le nom de la classe alors s'ils ont déjà la même classe?

— Praxis Ashelin

143

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

Pour vérifier la seule existence de l'attribut, quelle que soit la valeur, vous pouvez utiliser ce sélecteur à la place: $('div[imageId]')

— ThiefMaster
source

4

@ThiefMaster - Si la valeur de l'attribut n'est pas constante (c'est-à-dire qu'elle variera), comment la trouver?

— Développeur

quelques questions: 1- qu'en est-il des autres éléments ... 2- qu'en est-il des autres valeurs ... Je pourrais avoir l'attribut data-food sur de nombreux éléments: div, img et td, où chacun a une valeur différente.

— dsdsdsdsd

@ParthoGanguly Vous utilisez une variable de cette façon: $ ('div [imageId = "' + variableName + '"]')

— Kama

1

Cette solution ne répond pas vraiment au titre de cette page. Vous recherchez des éléments qui sont des divs. Une solution appropriée est une solution indépendante de l'élément réel.

— AndroidDev

164

Bien que cela ne réponde pas précisément à la question, je suis arrivé ici lors de la recherche d'un moyen d'obtenir la collection d'éléments (noms de balises potentiellement différents) qui avaient simplement un nom d'attribut donné (sans filtrage par valeur d'attribut). J'ai trouvé que ce qui suit fonctionnait bien pour moi:

$("*[attr-name]")

J'espère que cela aidera quelqu'un qui arrive à atterrir sur cette page à la recherche de la même chose que moi :).

Mise à jour: Il semble que l'astérisque n'est pas obligatoire, c'est-à-dire que sur la base de certains tests de base, ce qui suit semble être équivalent à ce qui précède (merci à Matt pour l'avoir signalé):

$("[attr-name]")

— sammy34
source

Parfait! Exactement ce que je cherchais.

— Paulius Matulionis

Très probablement ... Je n'ai pas vérifié l'aspect performance (ce n'était pas un facteur important pour mon utilisation à l'époque).

— sammy34

3

Y a-t-il une différence entre cela et $("[attr-name]")? (ie non *)

— Matthew

Oui, il y a une certaine différence entre eux. La notation en étoile soulève une erreur sur Firefox !!!! (Unescaped ...)

— ozz

en ajoutant à cela, vous pouvez également inclure une valeur d'attribut, par exemple:$("[data-toggle='modal']")

— MeltingDog

12

Cela ne s'appelle pas une balise; ce que vous recherchez s'appelle un attribut html.

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

— Val
source

5

Vous pouvez utiliser la valeur partielle d'un attribut pour détecter un élément DOM à l'aide du signe (^). Par exemple, vous avez des div comme ceci:

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

Vous pouvez utiliser le code:

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

Cela renverra un tableau DOM de divs dont l'ID commence par abc:

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

Voici la démo: http://jsfiddle.net/mCuWS/

— Krunal
source

4

Utilisez la concaténation de chaînes. Essaye ça:

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

— LostSenSS
source