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?

jquery html css custom-data-attribute 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

jQuery-Element nach Datenattributwert suchen

Antworten: