Charles Yeung
Angenommen, ich habe die Elemente wie folgt:
<div class="home">
<div class="tab231891230"></div>
<div class="tab121232441"></div>
<div class="tab123134545"></div>
</div>
Wie kann ich jQuery verwenden, um die div-Elemente auszuwählen, mit denen die Klasse beginnt? "tab"?
Kap
Es heißt die Attribut beginnt mit Selektor. Mein Beispiel setzt eine rote Textfarbe auf die Elemente:
$('[class^="tab"]').css('color', 'red');
Bitte beachten Sie, dass, wenn die Elemente mehr als eine Klasse haben und die andere der Klasse mit vorangeht tab Innerhalb (class="nyedva tab231891230") wird das Element von diesem Selektor nicht ausgewählt.
Wenn Sie auch diese auswählen möchten, können Sie dieses Beispiel verwenden:
$('.home div').filter(function () {
return this.className.match(/\btab/);
}).css('color', 'red');
@SyedQarib Warum sollte es nicht funktionieren? Einfach ersetzen .home div mit einfach div.
– kappa
6. Juli 2015 um 8:53 Uhr
Tut mir leid, ich habe versucht, mehr Tags als nur Divs zu filtern, aber jetzt habe ich eine Idee, wie das geht. Danke
– Syed Qarib
6. Juli 2015 um 9:34 Uhr
@lowtechsun Was möchtest du uns mit diesem jsFiddle-Link mitteilen?
– kappa
20. Februar 2016 um 20:32 Uhr
@kapa hat deiner Geige gerade $ hinzugefügt, damit die Leute sehen können, was sie in Aktion macht.
– Lowtech-Sonne
21. Februar 2016 um 2:17 Uhr
@lowtechsun Ich sehe jetzt, danke. Wird in meine Antwort bearbeitet.
– kappa
22. Februar 2016 um 9:10 Uhr
Wenn Sie mehrere Klassen in einem Element haben, verwenden Sie dies zur Auswahl
$("[class*='tab']");
Es wird mit Elementen wie diesem funktionieren
<div class="home">
<div class="module tab231891230"></div>
<div class="module tab121232441"></div>
<div class="module tab123134545"></div>
Bezug : jquery-Attribut enthält Selektor
Beachten Sie, dass dadurch auch Klassen wie ausgewählt werden timetablewas zu “seltsamen” Fehlern führt.
– kappa
22. Februar 2016 um 9:14 Uhr
Tim
Sie können es so machen:
$('div[class^="tab"]');
Ich fürchte, das wird tatsächlich nicht funktionieren, weil es einen Tippfehler gibt (ich habe es einfach blind kopiert und die Fehlermeldung „Unbekannter Ausdruck“ erhalten). Es gibt ein Gleichheitszeichen zu viel und die korrekte Syntax lautet: $(‘div[class^=”tab”]’);
– Alex Sanséau
31. August 2015 um 12:34 Uhr
Roko C. Buljan
Zuallererst: Versuchen Sie immer, a zu verwenden Sicheres Trennzeichen wie - Dh: tab-something
Das richtige Weg Um eine Klasse nach Präfix auszuwählen, verwenden Sie a Kombination von zwei Attributselektorendas ^ Beginnt mit und * Beinhaltet.
Der Grund dafür ist: nur durch Verwendung von: [class^="tab-something"] solche werden nur auswählen class="tab-something foo bar" aber nicht class="foo tab-something bar" Elemente – dir gebend unregelmäßige Ergebnisse.
Javascript:
const tabs = document.querySelectorAll('[class^="tab-"], [class*=" tab-"]');
jQuery:
const $tabs = $('[class^="tab-"], [class*=" tab-"]');
CSS:
[class^="tab-"], [class*=" tab-"] {
/* "tab-" prefixed class styles here */
}
Zur Erinnerung:
Das obige stellt sicher, dass beides ins Visier genommen wird "tab-aaa foo bar" und "foo tab-bbb bar"
warum das benutzen? Diese Nummer können Sie dem rel- oder id-Attribut wie folgt zuweisen:
<div class="home">
<div class="tab" rel="231891230"></div>
<div class="tab" rel="121232441"></div>
<div class="tab" rel="123134545"></div>
</div>
dann ist es erreichbar unter:
$('div.tab').click(yourhandler);
oder fügen Sie sogar eine Unterklasse dieser aktuellen “Tab” -Klasse hinzu:
<div class="home">
<div class="tab 231891230"></div>
<div class="tab 121232441"></div>
<div class="tab 123134545"></div>
</div>
Wählen Sie dann einfach die Klasse “tab” wie im obigen jQuery-Beispiel aus und machen Sie mit der zweiten Klasse, was Sie wollen (überprüfen Sie, ob sie vorhanden ist, entfernen Sie sie).
überprüfen Sie diese:
http://api.jquery.com/class-selector/
http://api.jquery.com/hasClass/
Der richtige Weg, Werte in Ihrem Ansatz zu speichern, ist a data- Attribut.
– kappa
19. Mai 2011 um 7:52 Uhr
Außerdem können Klassen nicht mit Zahlen beginnen
– Dämon
19. September 2013 um 13:44 Uhr
Anstatt das Beispiel zu kritisieren, versuchen Sie vielleicht, die Frage zu beantworten: Ja, die Klassennamen in der Frage des OP sind schlechte Beispiele, aber die Frage ist immer noch gültig.
– Derek Henderson
23. Juni 2015 um 14:42 Uhr
Der richtige Weg, Werte in Ihrem Ansatz zu speichern, ist a data- Attribut.
– kappa
19. Mai 2011 um 7:52 Uhr
Außerdem können Klassen nicht mit Zahlen beginnen
– Dämon
19. September 2013 um 13:44 Uhr
Anstatt das Beispiel zu kritisieren, versuchen Sie vielleicht, die Frage zu beantworten: Ja, die Klassennamen in der Frage des OP sind schlechte Beispiele, aber die Frage ist immer noch gültig.
– Derek Henderson
23. Juni 2015 um 14:42 Uhr
Nur ein allgemeiner Kommentar zu Klassen vs. IDs: Klassen sollten weitgehend mit einer “Klasse” aus mehreren Elementen übereinstimmen, und IDs sollten mit bestimmten Elementen übereinstimmen. Im Allgemeinen ist “tab1234567” etwas Spezifisches, was bedeutet, dass Sie eine “id” und keine Klasse verwenden sollten. Aber manchmal hat man keine Wahl, wenn der Code bereits geschrieben ist 🙂
– PJ Brunet
20. Januar 2015 um 22:34 Uhr