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


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ę

Odpowiedzi:


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.


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


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}]`);

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>

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.