[jquery] jQuery는 데이터 속성 값으로 요소 찾기

Program / 글쓴이

다음과 같은 몇 가지 요소가 있습니다.

<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(0) 인 요소에 클래스를 추가하려면 어떻게 해야합니까?

나는 많은 다른 해결책을 시도했지만 아무것도 작동하지 않았습니다. 예 :

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

어떤 생각?

답변

사용 속성은 선택기 같음

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

Fiddle Demo

.찾기()

그것은 나무 아래에서 작동합니다

선택기, jQuery 객체 또는 요소로 필터링 된 현재 일치하는 요소 집합에서 각 요소의 하위 항목을 가져옵니다.

답변

.filter () 사용할 수도 있습니다.

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

답변

문자열 대신 변수를 사용하여 동일한 솔루션을 검색했습니다.
내 솔루션으로 누군가를 도울 수 있기를 바랍니다. 🙂

var numb = "3";
$(`#myid[data-tab-id=${numb}]`);

답변

당신은 또한 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>

스 니펫 확장

답변