Platzhalter in jQuery-Selektoren


668

Ich versuche, einen Platzhalter zu verwenden, um die ID aller Elemente zu erhalten, deren ID mit "jander" beginnt. Ich habe es versucht $('#jander*'), $('#jander%')aber es funktioniert nicht ..

Ich weiß, dass ich Klassen der Elemente verwenden kann, um es zu lösen, aber es ist auch möglich, Platzhalter zu verwenden?

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

2
Dies ist eine Frage zu jQuery (oder genauer zur Sizzle-Engine).
Peter Örneholm

1
Nur eine Anmerkung: Es wäre viel schneller, dies mit Klassen zu tun, da jQuery oder Sizzle Browserfunktionen nutzen können (sollte für moderne Browser jedoch keinen großen Unterschied machen).
Felix Kling

4
Mögliches Duplikat der regulären Ausdrücke
Robert MacLean,

7
Es ist auch wichtig zu beachten, dass $("[id*=jander]")alle Elemente mit einer ID ausgewählt werden, die den String Jander enthält.
Gabriel Ryan Nahmias

Antworten:


1279

Um alle Elemente mit "jander" zu beginnen, sollten Sie Folgendes verwenden:

$("[id^=jander]")

Um diejenigen zu bekommen, die mit "jander" enden

$("[id$=jander]")

Siehe auch die JQuery-Dokumentation


22
Die Dokumente geben dieses Beispiel:$('input[name^="news"]').val('news here!')
Brenden

5
Der Code funktioniert wie vorgesehen. Es ist nicht erforderlich, das Anführungszeichen zu verdoppeln. Es erhöht lediglich die Wahrscheinlichkeit, dass ein Abschlusszitat fehlt, und macht es weniger lesbar.
Nico

4
@nico Interessanterweise sagen Dokumente, dass es mit Attributen funktioniert und idtechnisch eine Eigenschaft ist , aber ich denke, mit den neueren Versionen von jquery (dh 1.9) und wie die letzten Änderungen an Attributen und Eigenschaften behandelt werden, ist die Linie leicht unscharf in Bezug auf die beiden und so können Sie die Attributselektoren für (zumindest einige) Eigenschaften verwenden.
johntrepreneur

Was ist, wenn ich das Gerade der ausgewählten auswählen möchte? Zum Beispiel: Ich habe derzeit, .col-lg-4:even div:nth-child(1)wenn ich das gleiche tun wollte ... was würde ich schreiben? "[class^=.col-lg-]:even"? (Ich scheine es nicht zum Laufen zu bringen)
Luis Robles

Ein bisschen Verhalten, das mich überrascht hat ---- Wenn ich dies mit "class $ = ..." verwende, durchsucht es die Klassenliste eines Elements, nicht die einzelnen Klassennamen. Es trifft also nur, wenn die gesuchte Klasse die letzte Klasse für dieses Element ist. Ich habe nichts anderes als Chrome getestet. Und nicht sicher, ob der Fehler in jQuery oder in meinen Erwartungen an jQuery liegt.
Roger Krueger

115

Da der Titel einen Platzhalter vorschlägt, können Sie auch Folgendes verwenden:

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

Dadurch wird die angegebene Zeichenfolge an einer beliebigen Stelle in der ausgewählt id.


39

Probieren Sie die jQuery aus

Selektor, '^ =', z

[id^="jander"]

Ich muss allerdings fragen, warum willst du das nicht mit Klassen machen?


2
Um Kontext hinzuzufügen, suche ich nach der gleichen Lösung, da ich Django verwende, dessen ModelForm-Klasse IDs basierend auf Modellen vorschreibt und eine solche Gruppierung nicht zuzulassen scheint. dh der HTML-Code liegt außerhalb meiner Kontrolle.
Christian Mann

Dies ist nützlich, wenn Sie mit ASP.Net-WebForms arbeiten, insbesondere mit Radio- und Checkbox-Listen.
DavidScherer

35

Für Klassen können Sie verwenden:

div[class^="jander"]

Ich konnte dies nicht zum Laufen bringen und eine Nachricht über eine ungültige Syntax erhalten.
Stian

14

So erhalten Sie die ID aus dem Platzhalter-Match:

$('[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>


2
Anstelle von "event.target.id" könnte dies auch funktionieren: $ (this) .attr ("id")
PJ Brunet

10

Wenn Sie eine komplexere ID-Zeichenfolge haben, sind doppelte Anführungszeichen obligatorisch.

Wenn Sie beispielsweise eine ID wie die folgende haben: id="2.2"Der richtige Zugriff ist:$('input[id="2.2"]')

Verwenden Sie aus Sicherheitsgründen so oft wie möglich doppelte Anführungszeichen.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.