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');

Любая идея?

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

Развернуть фрагмент

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