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>
jquery jquery-selectors sizzle ziiweb
quelle
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

nico
quelle
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>
Erweitern Sie das Snippet

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

Martijn Smidt
quelle
39

Probieren Sie die jQuery aus

Selektor, '^ =', z

[id^="jander"]

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

GoatInTheMachine
quelle
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"]
l3thal
quelle
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>
Erweitern Sie das Snippet

PJ Brunet
quelle
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.

Eduard
quelle