过滤元素基于.data（）键/值

Question

假设我有4个带有.navlink类的div元素，点击后，使用.data()将名为'selected'的密钥设置为值true：< / p>

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

每次点击新的.navlink时，我都希望存储之前选择的navlink以供稍后操作。是否有一种快速简便的方法可以根据.data()存储的内容选择元素？

似乎没有适合账单的任何jQuery ：过滤器，我尝试了以下（在同一个点击事件中），但由于某种原因它不起作用：< / p>

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

我知道还有其他方法可以实现这一目标，但现在我只是好奇，如果可以通过.data()完成。

Answer 1

你的过滤器可以工作，但你需要在传递给过滤器的函数中匹配对象时返回true，以便抓取它们。

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

Answer 2

仅仅是为了记录，你可以使用jquery过滤数据（这个问题已经过时了，jQuery从那时起逐渐发展，所以写这个解决方案也是正确的）：

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

或更好（表现）：

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

或者，如果您希望获得data-selected设置的所有元素：

$('[data-selected]')

注意此方法仅适用于通过html-attributes设置的数据。如果您使用.data()调用设置或更改数据，则此方法将不再有效。

Answer 3

我们可以轻松制作插件：

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

用法（检查单选按钮）：

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

Answer 4

我注意到的两件事（虽然你写下来时可能会出错）。

1. 您在第一个示例（$('.navlink').click）
中错过了一个点
2. 要使过滤器正常工作，您必须返回一个值（return $(this).data("selected")==true）

Answer 5

听起来比工作更有价值。

1）为什么不只有一个JavaScript变量来存储对当前所选元素\ jQuery对象的引用。

2）为什么不在当前选择的元素中添加一个类。然后，您可以在DOM中查询“.active”类或其他内容。