Gibt es einen Platzhalter für Bezeichner (ID)?

70

Wenn ich eine unbekannte Anzahl von Bezeichnern habe, die ein bestimmtes Namensschema teilen, gibt es eine Möglichkeit, sie alle mit jQuery auf einmal abzurufen?

// 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(){}
Matt Elhotiby
quelle
8
Alle Ihre Beispiele beziehen sich auf Bezeichner, nicht auf Klassen.
Kirk Woll

Antworten:

181

Das Attribut begin-with selector ( '^=) funktioniert für Ihre IDs wie folgt:

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

Erwägen Sie jedoch, Ihren Elementen beispielsweise eine gemeinsame Klasse zu geben (ich mache mich kaputt) .instance, und verwenden Sie diesen Selektor:

$(".instance").click(function() {
  //do stuff
});
Nick Craver
quelle
2
@ JonCram Ich beschränkte mich auf ein Kichern, aber immer noch +1 für den Namen. :)
Konrad Viltersten
6
Witzig, aber die Frage nicht beantwortend (Eric tut es)
Rune Jeppesen
2
@RuneJeppesen Wenn Sie sich den tatsächlichen Code in der Frage ansehen, wird das OP mit der Terminologie Klasse gegen ID verwechselt, was ein Problem ist, dem ich zustimme.
Nick Craver
2
@ NickCraver Ich hasse es, dieser Typ zu sein, aber das tut es nicht. Sie lösen jedoch sein Problem. Ich hatte die gleiche Frage und Ihre Antwort löst mein Problem nicht (Die fraglichen Elemente stammen von einem Plugin eines Drittanbieters)
Rune Jeppesen
1
@RuneJeppesen Es ist wirklich so, sehen Sie sich die Frage an, es ist eine Liste von IDs, mit denen er übereinstimmen wollte. Ich zeige, wie das geht und wie man es besser macht - wenn Sie die Kontrolle dazu haben.
Nick Craver
90

Wenn Sie wirklich mit Klassen und nicht mit IDs übereinstimmen möchten, ist die Syntax etwas komplizierter, da die Klasse mehrere Werte haben kann.

// 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
});
Eric
quelle
12

Ich bin überrascht, dass niemand erwähnt hat, dass Sie einen eigenen Filter-Selektor erstellen (indem Sie die Selector-Funktionalität von jQuery erweitern). Hier habe ich einen Platzhalter-Selektor erstellt, den ich "likeClass" und "likeId" genannt habe. Er akzeptiert alle Platzhalter-Zeichenfolgen und findet alle Elemente, die übereinstimmen (ähnlich wie bei Regex-Übereinstimmungen).

Code:

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

Anwendungsbeispiel:

Angenommen, Sie hatten mehrere div-Elemente mit ähnlichen Namen wie .content-1, .content-2, .content-n ... usw. und möchten diese auswählen. Jetzt ist es Kuchen!

$ ('div: likeClass (content-)'); // Gibt alle Elemente zurück, die einen ähnlichen Klassennamen haben: content- *

oder

$ ('div: likeClass (content-)'); // Gibt alle Elemente mit einer ähnlichen ID zurück: content- *

Oh ja, noch etwas ... du kannst es auch verketten. :) :)

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

Genießen!

Timothy Perez
quelle
+1, schön! Ich habe dies für zwei UL-Elemente (verschachteltes Menü) versucht, $('ul:likeClass(menu_)').addClass('found_menu');die zum Testen gut funktionieren. Haben Sie eine Idee, wie Sie den 'Platzhalter'-Teil des Klassennamens wie' left 'oder' right 'extrahieren können, falls die Klassennamen' menu_left 'und' menu_right 'sind?
ddlab
11

Wenn Sie jQuery haben, brauchen Sie keinen zusätzlichen Ausdruck oder etwas Besonderes

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

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

Wie bereits erwähnt: https://stackoverflow.com/a/2220874/2845401

Shinrai
quelle
3

Warum ordnen Sie nicht einfach class = "instance"allen zu und wählen sie mit aus $('.instance')?

casablanca
quelle
3

Das sind IDs, aber Sie können etwas Ähnliches tun wie:

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

Das ist allerdings etwas teuer - es hilft, wenn Sie entweder a) den Elementtyp oder b) eine allgemeine Position im DOM angeben können, wie z.

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

Der [id^='...']Selektor bedeutet im Grunde "finde ein Element, dessen ID mit dieser Zeichenfolge beginnt, ähnlich wieid$= (ID endet mit dieser Zeichenfolge) usw.

Eine umfassende Liste finden Sie auf der Seite jQuery Docs hier .

mway
quelle
-2

Wir können es so machen:

$(document).ready(function () {
    $('[id*=btnOk]').live("click", function () {

    });
});
Thomas
quelle
1
liveist veraltet. Verwenden Sie on.
nhahtdh
-2

Dies ist die einzig richtige Antwort auf die ID-Platzhalterfrage.

$('[id*="Wild card in double quotes"]') 

Dies wird "Wild Card in doppelten Anführungszeichen. Und es gibt mehr !!!" und auch "Mehr BS vor Wild. Wild Card in doppelten Anführungszeichen" erhalten.

Sie sollten Anführungszeichen verwenden, die sich von Ihren '[]' Tags unterscheiden.

Kurt
quelle