Phần tử lọc dựa trên khóa / giá trị .data ()

Giả sử tôi có 4 phần tử div với lớp .navlink, khi được nhấp, sử dụng .data()để đặt khóa được gọi 'selected', thành giá trị true:

$('.navlink')click(function() { $(this).data('selected', true); })

Mỗi lần .navlinknhấp chuột mới, tôi muốn lưu trữ các lựa chọn trước đó navlinkđể thao tác sau này. Có cách nào nhanh chóng và dễ dàng để chọn một yếu tố dựa trên những gì được lưu trữ bằng cách sử dụng .data()không?

Dường như không có bất kỳ bộ lọc jQuery nào : phù hợp với hóa đơn và tôi đã thử các cách sau (trong cùng một sự kiện nhấp chuột), nhưng vì một số lý do, nó không hoạt động:

var $previous = $('.navlink').filter( 
    function() { $(this).data("selected") == true }
);

Tôi biết rằng có nhiều cách khác để thực hiện điều này, nhưng hiện tại tôi hầu như chỉ tò mò liệu nó có thể được thực hiện thông qua .data().

bộ lọc của bạn sẽ hoạt động, nhưng bạn cần trả về true trên các đối tượng phù hợp trong hàm được truyền cho bộ lọc để lấy chúng.

var $previous = $('.navlink').filter(function() { 
  return $(this).data("selected") == true 
});

Chỉ để ghi lại, bạn có thể lọc dữ liệu bằng jquery (câu hỏi này khá cũ và jQuery đã phát triển kể từ đó, vì vậy cũng đúng khi viết giải pháp này):

$('.navlink[data-selected="true"]');

hoặc, tốt hơn (cho hiệu suất):

$('.navlink').filter('[data-selected="true"]');

hoặc, nếu bạn muốn lấy tất cả các thành phần với data-selectedtập hợp:

$('[data-selected]')

Lưu ý rằng phương pháp này sẽ chỉ hoạt động với dữ liệu được đặt thông qua các thuộc tính html. Nếu bạn đặt hoặc thay đổi dữ liệu với .data()cuộc gọi, phương thức này sẽ không còn hoạt động.

Chúng tôi có thể tạo một plugin khá dễ dàng:

$.fn.filterData = function(key, value) {
    return this.filter(function() {
        return $(this).data(key) == value;
    });
};

Cách sử dụng (kiểm tra nút radio):

$('input[name=location_id]').filterData('my-data','data-val').prop('checked',true);

Hai điều tôi nhận thấy (chúng có thể là những sai lầm từ khi bạn viết nó xuống).

1. Bạn đã bỏ lỡ một dấu chấm trong ví dụ đầu tiên ( $('.navlink').click)
2. Để bộ lọc hoạt động, bạn phải trả về giá trị ( return $(this).data("selected")==true)

Âm thanh như công việc nhiều hơn giá trị của nó.

1) Tại sao không chỉ có một biến JavaScript duy nhất lưu trữ một tham chiếu đến đối tượng phần tử \ jQuery hiện được chọn.

2) Tại sao không thêm một lớp vào thành phần hiện được chọn. Sau đó, bạn có thể truy vấn DOM cho lớp ".active" hoặc một cái gì đó.