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

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

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.

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