jQuery елемент пошуку за значенням атрибуту даних

103

У мене є кілька елементів, як нижче:

<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

224

Використовуйте селектор атрибутів рівних

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

Fiddle Demo

.find ()

це працює вниз по дереву

Отримати нащадків кожного елемента в поточному наборі збіжених елементів, відфільтрованому селектором, об'єктом jQuery або елементом.

— Тушар Гупта - curioustushar
джерело

2

Моє ліжко. Я намагався це зробити, але в неправильному місці (перед тим, як динамічно додавати елементи ...). Все одно дякую за старання! Добре працює.

— MrUpsidown

@MrUpsidown Ласкаво просимо допомогти :)

— Tushar Gupta - curioustushar

1

Оце Так! це рішення чудово! Була проблема годинами, але це виправлено!

як я прирівнюю його до змінної величини var slidernumber = "0";, а не постійної "0"?

— tony gil

Якщо з якоїсь причини ви не можете залежати від того, який клас знаходиться там, то ви можете просто використовувати підстановку для першої частини, як ця $ ('* [data-slide = "0"]'). AddClass ('active') ;

— SeanMC

59

Ви також можете використовувати .filter ()

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

— Антон
джерело

5

Я шукав те саме рішення зі змінною замість 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>

Розгорніть фрагмент

— Гіріш
джерело