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

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

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

Любая идея?

Ответ 1

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

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

Скриншот

.find()

он работает по дереву

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

Ответ 2

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

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

Ответ 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>