基于.data()键/值的筛选元素

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

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

每次点击一个新的.navlink ,我想存储先前select的navlink以便以后操作。 有没有一种快速简单的方法来select一个基于使用.data()存储的元素?

似乎没有任何jQuery 符合条例草案的filter ,我尝试了以下(在同一个点击事件),但由于某种原因,它不起作用:

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

我知道还有其他的方法可以完成这个任务,但是现在我主要只是好奇它是否可以通过.data()来完成。

你的filter可以工作,但是你需要返回true来匹配传递给filter的函数中的对象来抓取它们。

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

只是为了logging,你可以用jQuery过滤数据(这个问题是相当古老的,从那时起,jQuery就演变了,所以这个解决scheme也是正确的):

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

或者更好(用于performance):

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

或者,如果你想获得所有具有data-selected集的元素:

 $('[data-selected]') 

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

我们可以很容易地做一个function:

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

用法(检查单选button):

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

我注意到了两件事(虽然可能是你写下来的错误)。

  1. 你错过了第一个例子中的一个点( $('.navlink').click
  2. 要filter工作,你必须返回一个值( return $(this).data("selected")==true

听起来像更多的工作,而不是它的价值。

1)为什么不只有一个JavaScriptvariables存储对当前选定元素\ jQuery对象的引用。

2)为什么不向当前选定的元素添加一个类。 然后你可以查询“.active”类的东西。