过滤元素基于.data()键/值

Question

假设我有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().

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-selectedset的所有元素:

$('[data-selected]')

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

-1当使用`.data()`方法而不是`data-`属性设置数据时,这不起作用.看到这个小提琴:http://jsfiddle.net/bryandowning/tySWC/ - 此外,`.find()`方法搜索前一个选择器的子节点.在给出的例子中,`data-selected`是`.navlink`的属性,而不是`.navlink`的子元素.另外,`$('div p')`和`$('div').find('p')`基本上是等价的.使用`.find()`似乎可能因为额外的函数调用而变慢(尽管我对此并不乐观).如果我对此有任何不妥,请纠正我(我真的希望这种方法有效). (46认同)
如果这个答案的低票数会吓到你 - 这是一个几乎完全相同的问题的100多票的接受答案http://stackoverflow.com/questions/4146502 (9认同)
一些事情:1)你是对的,如果用`.data()`设置数据,这不起作用,因为jQuery搜索DOM,我发布了那些(像我这样)得到这个问题的人出于其他原因; 2)正确,`.find()`搜索孩子,所以这个例子是错的; 3)你错了,它们不相同,因为jQuery从右向左搜索,请参阅http://jonraasch.com/blog/10-advanced-jquery-performance-tuning-tips-from-paul-irish (3认同)
投票支持`$('[data-selected]')`它帮我出了类似`$('ul.categories a [data-categories_id]').click(......);` (2认同)

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

我注意到的两件事(虽然你写下来时可能会出错).