Caractères génériques dans les sélecteurs jQuery

669

J'essaie d'utiliser un caractère générique pour obtenir l'id de tous les éléments dont l'id commence par "jander". J'ai essayé $('#jander*'), $('#jander%')mais ça ne marche pas ..

Je sais que je peux utiliser des classes d'éléments pour le résoudre, mais il est également possible d'utiliser des caractères génériques ??

<script type="text/javascript">

  var prueba = [];

  $('#jander').each(function () {
    prueba.push($(this).attr('id'));
  });

  alert(prueba);


});

</script>

<div id="jander1"></div>
<div id="jander2"></div>
jquery jquery-selectors sizzle ziiweb
la source
2
C'est une question sur jQuery (ou plus exactement le moteur Sizzle).
Peter Örneholm
1
Juste une note: il serait beaucoup plus rapide de le faire avec des classes car jQuery ou Sizzle peuvent utiliser les fonctions du navigateur (cela ne devrait cependant pas faire beaucoup de différence pour les navigateurs modernes).
Felix Kling
4
doublon possible d' expressions régulières du sélecteur JQuery
Robert MacLean
7
En outre, une chose importante à noter est que $("[id*=jander]")sélectionnerait tous les éléments avec un ID contenant le jander de chaîne.
Gabriel Ryan Nahmias

Réponses:

1281

Pour obtenir tous les éléments commençant par "jander", vous devez utiliser:

$("[id^=jander]")

Pour obtenir ceux qui se terminent par "jander"

$("[id$=jander]")

Voir aussi la documentation JQuery

Nico
la source
22
Les docs donnent cet exemple:$('input[name^="news"]').val('news here!')
Brenden
5
Le code fonctionne comme prévu. Il n'est pas nécessaire de doubler le devis, cela augmente simplement les chances de manquer un devis de clôture et le rend moins lisible.
nico
4
@nico Assez intéressant, les documents disent que cela fonctionne avec des attributs et idest techniquement une propriété , mais je suppose qu'avec les versions les plus récentes de jquery (c'est-à-dire 1.9) et comment les dernières modifications apportées aux attributs et aux propriétés sont bloquées, la ligne est légèrement floue par rapport aux deux et ainsi vous pouvez utiliser les sélecteurs d'attributs pour (au moins certaines) propriétés.
johntrepreneur
Et si, je veux sélectionner le Pair de ceux sélectionnés. par exemple: j'en ai actuellement .col-lg-4:even div:nth-child(1)si je voulais faire de même .... qu'est-ce que j'écrirais? "[class^=.col-lg-]:even"? (Je ne semble pas le faire fonctionner)
Luis Robles
Un peu de comportement qui m'a surpris ---- si j'utilise ceci avec "class $ = ...", il recherche la liste des classes d'un élément, pas les noms de classe individuels. Il ne frappe donc que si la classe recherchée est la dernière classe de cet élément. Je n'ai testé que Chrome. Et je ne sais pas si le défaut est dans jQuery ou dans mes attentes de jQuery.
Roger Krueger
115

Étant donné que le titre suggère un caractère générique, vous pouvez également utiliser ceci:

$(document).ready(function(){
  console.log($('[id*=ander]'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jander1"></div>
<div id="jander2"></div>
Développer l'extrait

Cela sélectionnera la chaîne donnée n'importe où dans le id.

Martijn Smidt
la source
39

Essayez le jQuery commence par

sélecteur, '^ =', par exemple

[id^="jander"]

Je dois cependant demander, pourquoi ne voulez-vous pas faire cela en utilisant des cours?

GoatInTheMachine
la source
2
Pour ajouter du contexte, je recherche la même solution car j'utilise Django, dont la classe ModelForm dicte les identifiants basés sur les modèles, et ne semble pas autoriser un regroupement comme celui-ci; c'est à dire que le HTML est hors de mon contrôle.
Christian Mann
Cela est utile lorsque vous travaillez avec ASP.Net WebForms, en particulier les listes de radio et de cases à cocher.
DavidScherer
35

pour les cours, vous pouvez utiliser: 

div[class^="jander"]
l3thal
la source
Je n'ai pas pu faire fonctionner cela, obtenir un message sur la syntaxe invalide.
stian
14

Pour obtenir l'ID de la correspondance générique:

$('[id^=pick_]').click(
  function(event) {

    // Do something with the id # here: 
    alert('Picked: '+ event.target.id.slice(5));

  }
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pick_1">moo1</div>
<div id="pick_2">moo2</div>
<div id="pick_3">moo3</div>
Développer l'extrait

PJ Brunet
la source
2
Au lieu de "event.target.id" cela pourrait aussi fonctionner: $ (this) .attr ("id")
PJ Brunet
10

Lorsque vous avez une chaîne d'identification plus complexe, les guillemets doubles sont obligatoires.

Par exemple, si vous avez un identifiant comme celui id="2.2"-ci:, la façon correcte d'y accéder est:$('input[id="2.2"]')

Autant que possible, utilisez les guillemets doubles, pour des raisons de sécurité.

eduard
la source