jQuery найти элемент по значению атрибута данных

104

У меня есть несколько элементов, как показано ниже:

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

Как я могу добавить класс к элементу со data-slideзначением атрибута 0(ноль)?

Я пробовал много разных решений, но ничего не помогло. Пример:

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

Любая идея?

jquery html css custom-data-attribute MrUpsidown
источник
2
Чтобы немного объяснить, причина, по которой это не работает, заключается в том, что вы пытаетесь найти потомков .slide-linkс атрибутом [data-slide="0"]. Поскольку что-то не может быть потомком самого себя, ему нечего возвращать. Однако, если бы у вас была оболочка для этих ссылок, то это сработало бы:$('.slide-link-wrapper').find('[data-slide="0"]').addClass('active');
DondeEstaMiCulo
См. Также stackoverflow.com/q/4191386/292060
goodeye 07

Ответы:

228

Использовать селектор равных атрибутов

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

Fiddle Demo

.найти()

это работает вниз по дереву

Получите потомков каждого элемента в текущем наборе совпадающих элементов, отфильтрованных с помощью селектора, объекта jQuery или элемента.

Тушар Гупта - куриустушар
источник
2
Виноват. Я пробовал это, но не в том месте (перед динамическим добавлением моих элементов ...). В любом случае спасибо за усилия! Работает отлично.
MrUpsidown
@MrUpsidown Добро пожаловать! Рад помочь :)
Тушар Гупта - curioustushar
1
Вот Это Да! это решение отличное! Была проблема в течение нескольких часов, но это устранило ее!
как мне приравнять его к значению переменной var slidernumber = "0";, а не к константе "0"?
Тони
Если по какой-то причине вы не можете зависеть от наличия определенного класса, вы можете просто использовать подстановочный знак для первой части, например $ ('* [data-slide = "0"]'). AddClass ('active') ;
SeanMC 06
59

Вы также можете использовать .filter ()

$('.slide-link').filter('[data-slide="0"]').addClass('active');
Антон
источник
6

Я искал такое же решение с переменной вместо String.
Я надеюсь, что смогу помочь кому-то своим решением :)

var numb = "3";
$(`#myid[data-tab-id=${numb}]`);
Алешани
источник
3

вы также можете использовать andSelf()метод для получения оболочки DOM, затем find()можно обойтись как ваша идея

$(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>
Развернуть фрагмент

Гириш
источник