jQuery tìm phần tử theo giá trị thuộc tính dữ liệu

103

Tôi có một số yếu tố như sau:

<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>

Làm cách nào để thêm một lớp vào phần tử có data-slidegiá trị thuộc tính là 0(không)?

Tôi đã thử nhiều giải pháp khác nhau nhưng không có hiệu quả. Một ví dụ:

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

Bất kỳ ý tưởng?

— MrUpsidown
nguồn

2

Để giải thích một chút ở đây, lý do tại sao điều này không hoạt động là vì bạn đang cố gắng tìm con cháu của .slide-linkvới thuộc tính của [data-slide="0"]. Vì một cái gì đó không thể là hậu duệ của chính nó, nó không có gì để trở lại. Tuy nhiên, nếu bạn đã có một wrapper xung quanh những liên kết này, thì đây sẽ làm việc:$('.slide-link-wrapper').find('[data-slide="0"]').addClass('active');

— DondeEstaMiCulo

Xem thêm stackoverflow.com/q/4191386/292060

— goodeye

223

Sử dụng Bộ chọn các dấu bằng thuộc tính

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

Fiddle Demo

.tìm thấy()

nó hoạt động trên cây

Lấy phần tử con của mỗi phần tử trong tập hợp phần tử phù hợp hiện tại, được lọc bởi bộ chọn, đối tượng jQuery hoặc phần tử.

— Tushar Gupta - curioustushar
nguồn

2

Lỗi của tôi. Tôi đã thử điều đó nhưng không đúng chỗ (trước khi thêm động các phần tử của tôi ...). Dù sao cũng cảm ơn vì đã nỗ lực! Hoạt động tốt.

— MrUpsidown

@MrUpsidown Chào mừng hạnh phúc để giúp đỡ :)

— Tushar Gupta - curioustushar

1

Chà! giải pháp này là tuyệt vời! Đã gặp sự cố trong nhiều giờ nhưng điều này đã khắc phục nó!

làm cách nào để đánh đồng nó với một giá trị biến var slidernumber = "0";thay vì hằng số "0"?

— gil tony

Nếu vì lý do nào đó bạn không thể phụ thuộc vào một lớp nhất định ở đó thì bạn chỉ có thể sử dụng ký tự đại diện cho phần đầu tiên như sau $ ('* [data-slide = "0"]'). AddClass ('active') ;

— SeanMC

59

Bạn cũng có thể sử dụng .filter ()

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

— Anton
nguồn

5

Tôi đã tìm kiếm một giải pháp tương tự với một biến thay vì Chuỗi.
Tôi hy vọng tôi có thể giúp ai đó với giải pháp của tôi :)

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

— Aleshanee
nguồn

3

bạn cũng có thể sử dụng andSelf()phương thức để có được DOM của wrapper chứa sau đó find()có thể hoạt động như ý tưởng của bạn

$(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>

Mở rộng đoạn mã

— Girish
nguồn