Jquery 基于.data（）键/值的筛选器元素

假设我有4个div元素，其类为

.navlink

，单击时，使用

.data（）

将名为

'selected'

的键设置为

true

：

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

每次单击一个新的

.navlink

，我都想存储以前选择的

navlink

，以便以后操作。是否有一种快速简便的方法可以根据使用

.data（）

存储的内容选择元素

似乎没有任何符合条件的jQuery：过滤器，我尝试了以下方法（在同一个单击事件中），但由于某些原因它不起作用：

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

---

我知道还有其他方法可以做到这一点，但现在我只是想知道是否可以通过

.data（）

完成这项工作

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

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

我注意到两件事（可能是您写下它时的错误）

您在第一个示例中遗漏了一个点（

$（'.navlink'）。请单击

）

要使筛选器工作，必须返回一个值（

return$（this）.data（“selected”）==true

）

---

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

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

---

为了记录在案，您可以使用jquery对数据进行过滤（这个问题很老了，jquery从那时起就发展起来了，所以编写这个解决方案也是正确的）：

或者，更好的（性能）：

或者，如果要获取所有选中了

数据的元素，请执行以下操作：

$('[data-selected]')

注意此方法仅适用于通过html属性设置的数据。如果您使用
.data（）
调用设置或更改数据，此方法将不再有效。
我们可以非常轻松地制作插件：

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

用法（检查单选按钮）：

是的，但就像我说的，我知道还有其他方法可以做到。我只是想知道它是否可以通过data（）进行过滤，以及为什么filter（）对我不起作用。谢谢，对不起。我错过了你问题的那一部分。如果这个答案的票数太低让你感到害怕的话-这是一个对几乎相同的问题有100多票的公认答案-1如果使用
.data（）
方法而不是
data-
属性设置数据，则这不起作用。参见此提琴：-另外，
.find（）
方法搜索前面选择器的子级。在给出的示例中，
所选数据
是
.navlink
的属性，而不是
.navlink
的子项。另外，
$（'div p'）
和
$（'div'）.find（'p'）
本质上是等价的。使用
.find（）
似乎会因为额外的函数调用而变得更慢（尽管我对此并不乐观）。如果我在这方面有任何错误，请纠正我（我真的希望这个方法能起作用）。有两件事：1）如果你用
.data（）
设置数据，那么这个方法不起作用，你是对的，因为jQuery在DOM中搜索，所以我为那些（像我一样）出于其他原因找到这个问题的人发布了它；2） 正确，
.find（）
搜索子项，因此在本例中是错误的；3） 你错了，它们不是等价的，因为jQuery从右到左搜索，请参见Up vote for
$（“[data selected]”）
它帮助我找到了类似于
$（“ul.categories a[data-categories_id]”的东西。单击（……）
另外，如果您使用.attr更新数据属性，如果您使用.data检索数据属性，则该值将不会更新-因此在混合这两者时要小心。请注意，StefanoP已提供，这不再是唯一的方法alternatives@NathanKoop不完全是。请参阅我对其答案的评论。对于那些使用数据属性在文档中的任何位置查找其他不可查找元素（无id的div等，您需要能够出于任何原因访问这些元素）的人：
$（“*”）.filter（function（）{return$（this）.data（“此处的数据标识符”）==此处的数据值；}）这不是“混乱”-这是过滤任意项的唯一安全方法，无需“转义”这些值，以确保搜索项与选择器其余部分的串联不会创建非法选择器。您是指插件方法，否则这与接受的答案相同。…。@jave.web。但并不是每个人都知道如何将其转化为插件。更新的措辞。别误会我，你的回答很好，但是这里的话很重要，谢谢你的更新：）
$('[data-selected]')

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