jQuery znajdź element według wartości atrybutu danych

103

Mam kilka elementów jak poniżej:

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

Jak mogę dodać klasę do elementu, który ma data-slidewartość atrybutu 0(zero)?

Próbowałem wielu różnych rozwiązań, ale nic nie działało. Przykład:

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

Dowolny pomysł?

— MrUpsidown
źródło

2

Aby trochę wyjaśnić, powodem, dla którego to nie działa, jest to, że próbujesz znaleźć potomków .slide-linkz atrybutem [data-slide="0"]. Ponieważ coś nie może być potomkiem samego siebie, nie ma nic do zwrócenia. Jednak gdybyś miał $('.slide-link-wrapper').find('[data-slide="0"]').addClass('active');

— otokę

Zobacz także stackoverflow.com/q/4191386/292060

— goodeye

225

Użyj selektora atrybutu równa się

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

Fiddle Demo

.odnaleźć()

działa w dół drzewa

Pobierz potomków każdego elementu w bieżącym zestawie dopasowanych elementów, przefiltrowanych przez selektor, obiekt jQuery lub element.

— Tushar Gupta - curioustushar
źródło

2

Mój błąd. Próbowałem, ale w złym miejscu (przed dynamicznym dodaniem moich elementów ...). W każdym razie dzięki za wysiłek! Działa w porządku.

— MrUpsidown,

@MrUpsidown Welcome Chętnie pomożemy :)

— Tushar Gupta - curioustushar

1

Łał! to rozwiązanie jest świetne! Miałem problem przez wiele godzin, ale to go rozwiązało!

jak zrównać to z wartością zmiennej var slidernumber = "0";zamiast stałej "0"?

— tony gil

Jeśli z jakiegoś powodu nie możesz polegać na pewnej klasie, możesz po prostu użyć symbolu wieloznacznego w pierwszej części, takiego jak $ ('* [data-slide = "0"]'). AddClass ('active') ;

— SeanMC

59

Możesz także użyć .filter ()

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

— Anton
źródło

5

Szukałem tego samego rozwiązania ze zmienną zamiast String.
Mam nadzieję, że mogę komuś pomóc z moim rozwiązaniem :)

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

— Aleshanee
źródło

3

Możesz także użyć andSelf()metody, aby uzyskać opakowanie DOM, a następnie find()możesz to obejść jako swój pomysł

$(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>

Rozwiń fragment

— Girish
źródło