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
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

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
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
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
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
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
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
source