基于 .data() 键/值的过滤器元素答案

【问题标题】：Filter element based on .data() key/value基于 .data() 键/值的过滤器元素
【发布时间】：2010-11-03 19:33:01
【问题描述】：

假设我有 4 个类为 .navlink 的 div 元素，单击它们时，使用 .data() 将名为 'selected' 的键设置为 true 的值：

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

每次单击新的.navlink 时，我想存储之前选择的navlink 以供以后操作。有没有一种快速简便的方法可以根据使用 .data() 存储的内容来选择元素？

似乎没有任何符合要求的 jQuery :filters，我尝试了以下（在同一个点击事件中），但由于某种原因它不起作用：

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

我知道还有其他方法可以做到这一点，但现在我主要是好奇是否可以通过.data() 完成。

【问题讨论】：

【解决方案1】：

听起来工作比它的价值更多。

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

2) 为什么不给当前选中的元素添加一个类。然后你可以在 DOM 中查询“.active”类什么的。

【讨论】：

【解决方案2】：

我注意到了两件事（虽然它们可能是你写下来时的错误）。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

为了记录，你可以用jquery过滤数据（这个问题很老了，jQuery从那时起就进化了，所以写这个解决方案也是对的）：

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

或者，更好（为了性能）：

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

或者，如果你想获取所有设置data-selected的元素：

$('[data-selected]')

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

【讨论】：

如果这个答案的低票数吓到你 - 这是一个几乎相同的问题得到 100 多票的公认答案stackoverflow.com/questions/4146502
-1 当使用.data() 方法而不是data- 属性设置数据时，这不起作用。请参阅此小提琴：jsfiddle.net/bryandowning/tySWC - 此外，.find() 方法搜索前面选择器的子项。在给出的示例中，data-selected 是.navlink 的属性，而不是.navlink 的子属性。此外，$('div p') 和 $('div').find('p') 本质上是等价的。由于额外的函数调用，使用.find() 似乎可能会更慢（尽管我对此并不积极）。如果我对此有任何错误，请纠正我（我真的希望这种方法有效）。
有几件事：1) 你是对的，如果你用.data() 设置数据，这不起作用，因为 jQuery 通过 DOM 搜索，我为那些（比如我）发布了它谁出于其他原因提出了这个问题； 2) 正确，.find() 搜索孩子，所以在这个例子中是错误的； 3）你错了，它们不等价，因为 jQuery 从右到左搜索，见jonraasch.com/blog/…
对$('[data-selected]') 投赞成票，这对$('ul.categories a[data-categories_id]').click(......); 之类的东西很有帮助
另外，如果您使用 .attr 更新数据属性，如果您使用 .data 检索它，则该值将不会更新 - 所以在混合两者时要小心

【解决方案5】：

我们可以很容易地制作一个插件：

$.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);

【讨论】：