web-dev-qa-db-fra.com

Existe-t-il un sélecteur générique pour les identifiants (id)?

Si j'ai un nombre inconnu d'identifiants partageant un schéma de nommage spécifique, existe-t-il un moyen de les saisir tous en même temps à l'aide de jQuery?

// These are the IDs I'd like to select
#instance1
#instance2
#instance3
#instance4

// What do I need to add or how do I need to modify this jQuery selector in order to select all the IDs above?
("#instanceWILDCARD").click(function(){}
jqueryjquery-selectorswildcard
63
Matt Elhotiby

Le attribut commence-avec le sélecteur ('^=) fonctionnera pour vos identifiants, comme ceci:

$("[id^=instance]").click(function() {
  //do stuff
});

Cependant, envisagez de donner à vos éléments une classe commune, par exemple (je me fais craquer) .instance, et utilisez ce sélecteur:

$(".instance").click(function() {
  //do stuff
});
168
Nick Craver

Si vous voulez vraiment faire correspondre les classes, pas les identifiants, la syntaxe est un peu plus compliquée, car la classe peut avoir plusieurs valeurs.

// handle elements like <div class="someclass1"></div>
$('[class^="someclass"]').click(function() {
   // do stuff
});

// handle elements like <div class="foo someclass1"></div>
$('[class*=" someclass"]').click(function() {
   // do stuff
});
85
Eric

Je suis surpris que personne n'ait mentionné la création de votre propre sélecteur de filtre (en étendant les fonctionnalités du sélecteur de jQuery). Ici, j'ai créé un sélecteur générique que j'ai appelé "likeClass" et "likeId" qui accepte n'importe quelle chaîne générique et trouve tous les éléments qui correspondent (similaire à la correspondance Regex).

Code:

$.expr[':'].likeClass = function(match){
      return $('[class*=" '+ match +'"]');
};
$.expr[':'].likeId = function(match){
      return $('[id*=" '+ match +'"]');
};

Exemple d'utilisation:

Supposons maintenant que vous disposiez de plusieurs éléments div portant des noms similaires, tels que .content-1, .content-2, .content-n ... etc. et que vous souhaitez les sélectionner. Maintenant c'est du gâteau!

$ ('div: likeClass (content-)'); // Retourne tous les éléments ayant un nom de classe similaire: content- *

ou

$ ('div: likeClass (content-)'); // retourne tous les éléments ayant un identifiant similaire: content- *

Oh oui, encore une chose ... vous pouvez aussi l'enchaîner. :)

$('li:likeId(slider-content-)').hide().addClass('sliderBlock').first().fadeIn('fast');

Prendre plaisir!

11
Timothy Perez

Pas besoin d'exprime supplémentaire ou de quelque chose d'extraordinaire si vous avez jQuery

jQuery('[class*="someclass"]').click(function(){
});

jQuery('[id*="someclass"]').click(function(){
});

Comme indiqué: https://stackoverflow.com/a/2220874/2845401

11
Shinrai

Pourquoi n'attribuez-vous pas simplement class = "instance" À tous et ne les sélectionnez pas avec $('.instance')?

3
casablanca

Ce sont des identifiants, mais vous pouvez faire quelque chose de similaire à:

$("[id^='instance']").click(...)

C’est toutefois un peu cher - cela aide si vous pouvez spécifier a) le type d’élément ou b) une position générale dans le DOM, telle que:

$("#someContentDiv span[id^='instance']").click(...)

Le [id^='...'] Le sélecteur signifie fondamentalement "trouver un élément dont l'ID commence par cette chaîne, similaire à id$= (ID se termine par cette chaîne), etc.

Vous pouvez trouver une liste complète sur la page jQuery Docs ici .

3
mway

Utilisez la carotte.

$("div[id^=instance]").hide();

exemple jsFiddle

2
jhanifen