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

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

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

어떤 생각?

— 미스터 업시 다운
소스

2

여기서 조금 설명하자면 이것이 작동하지 않는 이유 .slide-link는 속성이 있는의 자손을 찾으려고하기 때문 입니다 [data-slide="0"]. 무언가는 그 자체의 후손이 될 수 없기 때문에 반환 할 것이 없습니다. 그러나 이러한 링크 주위에 래퍼가 있다면 다음과 같이 작동했을 것입니다.$('.slide-link-wrapper').find('[data-slide="0"]').addClass('active');

— DondeEstaMiCulo

stackoverflow.com/q/4191386/292060

— goodeye

225

사용 속성은 선택기 같음

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

Fiddle Demo

.찾기()

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

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

— Tushar Gupta-curioustushar
소스

2

내 잘못이야. 나는 그것을 시도했지만 잘못된 위치에서 (내 요소를 동적으로 추가하기 전에 ...). 어쨌든 노력에 감사드립니다! 잘 작동합니다.

— MrUpsidown 2014

:) 도움에 오신 것을 환영합니다 해피 @MrUpsidown

— Tushar 굽타 - 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

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

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

— Aleshanee
소스

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>

스 니펫 확장

— Girish
소스