jQuery 데이터 속성 값으로 요소 찾기

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(0)?

저는 여러 가지 해결책을 시도해 보았지만 아무 것도 효과가 없었습니다.예:

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

감 잡히는 게 없어요?

동일 특성 선택기 사용

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

Fiddle Demo

.find()

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

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

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

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

String 대신 변수로 동일한 솔루션을 검색했습니다.
제 해결책을 누군가에게 도움을 줄 수 있기를 바랍니다 :)

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>

다른 데이터 속성과 다른 데이터 속성 값을 가진 여러 요소를 반환하려고 할 때 둘 다 항상 존재하는 것은 아닙니다.

<p class='my-class' data-attribute1='1'></p>
<p class='my-class' data-attribute2='2'></p>

// data-attribute1 OR data-attribute2
$(".my-class").filter(`[data-attribute1="${firstID}"],[data-attribute2="${secondID}"]`);

데이터 속성과 데이터 속성 값이 서로 다른 여러 요소를 반환하려고 할 때 두 요소 모두 항상 존재합니다.

<p class='my-class' data-attribute1='1' data-attribute2='1'></p>
<p class='my-class' data-attribute1='1' data-attribute2='2'></p>

// data-attribute1 AND data-attribute2
$(".my-class").filter(`[data-attribute1="${firstID}"][data-attribute2="${secondID}"]`);

OR 또는 AND 인수를 사용한 검색을 구별하려면 쉼표의 배치가 중요합니다.

---

또한 데이터 속성은 같지만 속성 값이 다른 요소에 대해서도 작동합니다.

$(".my-class").filter(`[data-attribute1="${firstID}"],[data-attribute1="${secondID}"]`);

저는 스택 오버플로에 대한 @omarjebari의 이 게시물에서 영감을 받았습니다.

언급URL : https://stackoverflow.com/questions/21756777/jquery-find-element-by-data-attribute-value