Zielelemente nach Klassenpräfix

Lesezeit: 4 Minuten

Benutzer-Avatar
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"?

  • 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

Benutzer-Avatar
Kap

Es heißt die Attribut beginnt mit Selektor. Mein Beispiel setzt eine rote Textfarbe auf die Elemente:

$('[class^="tab"]').css('color', 'red');

jsFiddle-Demo

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');

jsFiddle-Demo

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

Benutzer-Avatar
Tim

Sie können es so machen:

$('div[class^="tab"]');

Sehen http://api.jquery.com/attribute-starts-with-selector/

  • 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


Benutzer-Avatar
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.

Zielelemente nach Klassennamenpräfix

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/

http://api.jquery.com/addClass/

http://api.jquery.com/removeClass/

  • 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

1017890cookie-checkZielelemente nach Klassenpräfix

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy