jQuery-Element nach Datenattributwert suchen

102

Ich habe ein paar Elemente wie unten:

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

Wie kann ich dem Element eine Klasse hinzufügen, die den data-slideAttributwert 0(Null) hat?

Ich habe viele verschiedene Lösungen ausprobiert, aber nichts hat funktioniert. Ein Beispiel:

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

Irgendeine Idee?

— MrUpsidown
quelle

2

Um die Dinge hier ein wenig zu erklären, ist der Grund, warum dies nicht funktioniert, der, dass Sie versuchen, die Nachkommen von .slide-linkmit dem Attribut von zu finden [data-slide="0"]. Da etwas kein Nachkomme von sich selbst sein kann, muss es nichts zurückgeben. Wenn Sie jedoch einen Wrapper um diese Links $('.slide-link-wrapper').find('[data-slide="0"]').addClass('active');

— gehabt

Siehe auch stackoverflow.com/q/4191386/292060

— goodeye

222

Verwenden Sie Attribute Equals Selector

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

Fiddle Demo

.finden()

es funktioniert den Baum hinunter

Ruft die Nachkommen jedes Elements in der aktuellen Gruppe übereinstimmender Elemente ab, gefiltert nach einem Selektor, einem jQuery-Objekt oder einem Element.

— Tushar Gupta - Curioustushar
quelle

2

Mein Fehler. Ich hatte das versucht, aber an der falschen Stelle (bevor ich meine Elemente dynamisch hinzufügte ...). Trotzdem danke für die Mühe! Funktioniert gut.

— MrUpsidown

@ MrUpsidown Willkommen Gerne helfen :)

— Tushar Gupta - Curioustushar

1

Beeindruckend! Diese Lösung ist großartig! Hatte stundenlang ein Problem, aber das hat es behoben!

Wie setze ich es mit einem variablen Wert var slidernumber = "0";anstelle der Konstanten gleich "0"?

— Tony Gil

Wenn Sie sich aus irgendeinem Grund nicht darauf verlassen können, dass eine bestimmte Klasse vorhanden ist, können Sie einfach einen Platzhalter für den ersten Teil wie diesen $ ('* [data-slide = "0"]') verwenden. AddClass ('active') ;;

— SeanMC

58

Sie können auch .filter () verwenden

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

— Anton
quelle

5

Ich suchte nach der gleichen Lösung mit einer Variablen anstelle des Strings.
Ich hoffe ich kann jemandem mit meiner Lösung helfen :)

var numb = "3";
$(`#myid[data-tab-id=${numb}]`);

— Aleshanee
quelle

3

Sie können auch die andSelf()Methode verwenden, um das Wrapper-DOM zu erhalten, und dann find()als Ihre Idee umgehen

$(function() {
  $('.slide-link').andSelf().find('[data-slide="0"]').addClass('active');
})

.active {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="slide-link" href="#" data-slide="0">1</a>
<a class="slide-link" href="#" data-slide="1">2</a>
<a class="slide-link" href="#" data-slide="2">3</a>

Erweitern Sie das Snippet

— Girish
quelle