Wie füge ich mit jQuery eine Klasse zu einem Element basierend auf seinem Datenattributwert hinzu?

jQuery: Element nach Datenattributwert suchen

Im HTML-Markup können Elementen mithilfe der Daten-* benutzerdefinierte Datenattribute zugewiesen werden. Attributsyntax. Diese Attribute werden häufig zum Speichern zusätzlicher Informationen verwendet, auf die durch JavaScript-Code zugegriffen oder diese manipuliert werden können.

Ein häufiger Anwendungsfall besteht darin, einem Element basierend auf dem Wert seines Datenattributs eine bestimmte Klasse hinzuzufügen. Betrachten Sie beispielsweise die folgenden HTML-Elemente:

<a class="slide-link" href="#" data-slide="0">1</a><br><a class="slide-link" href="#" data-slide="1">2</a><br><a class="slide-link" href="#" data- slide="2">3</a><br>

Unser Ziel ist es, dem Element eine „aktive“ Klasse mit dem data-slide-Attributwert 0 (Null) hinzuzufügen ).

Attribut-Gleich-Selektor

jQuery bietet einen Attribut-Gleich-Selektor, der es uns ermöglicht, Elemente basierend auf dem genauen Wert eines bestimmten Attributs auszuwählen. Um unser Ziel zu erreichen, können wir den folgenden Code verwenden:

$('.slide-link[data-slide="0"]').addClass('active');<br>

Dieser Code wählt das Element mit der Klasse „slide-link“ und dem data-slide-Attribut gleich „0“ aus. Anschließend wird die Klasse „aktiv“ hinzugefügt.

Verstehen von .find()

Die Methode .find(), die im ersten Versuch verwendet wurde, funktioniert durch Durchlaufen des DOM-Baums. In diesem Fall möchten wir das Element jedoch anhand seines Datenattributs auswählen, nicht anhand seiner Nachkommen. Daher ist die Verwendung des Attribut-Gleichheits-Selektors für diese Aufgabe besser geeignet.

Das obige ist der detaillierte Inhalt vonWie füge ich mit jQuery eine Klasse zu einem Element basierend auf seinem Datenattributwert hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!