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


115

假设我有4个带有class的div元素.navlink,单击这些元素.data()可将名为的键设置'selected'为的值true

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

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

似乎没有符合要求的jQuery :filters,我尝试了以下操作(在同一click事件中),但是由于某些原因,它不起作用:

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

我知道还有其他方法可以完成此操作,但是现在我只是好奇是否可以通过来完成.data()

Answers:


191

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

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

6
请注意,这不再是唯一的方法,StefanoP提供了替代方法
Nathan Koop

3
@NathanKoop,不完全是。见我对他的回答的评论。
布莱恩·唐宁

对于那些使用数据属性在文档中任何位置查找否则无法找到的元素(id少了divs等...您需要出于任何原因而需要访问的元素)的用户:$("*").filter(function() { return $(this).data("DATA IDENTIFIER HERE") == DATA VALUE HERE; });
Tschallacka

这不是“混乱”-这是对任意术语进行过滤而无需“转义”那些值以确保搜索词与选择器其余部分的连接不会创建非法选择器的唯一安全方法。
Alnitak

145

仅作记录,您可以使用jquery过滤数据(这个问题已经很老了,jQuery从那时起发展起来,因此编写此解决方案也是正确的):

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

或者,更好(出于性能考虑):

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

或者,如果您想获取所有带有data-selectedset 的元素:

$('[data-selected]')

请注意,此方法仅适用于通过html属性设置的数据。如果您通过.data()调用设置或更改数据,则此方法将不再起作用。


9
如果该答案的投票数
太少

47
-1当使用.data()方法而不是data-属性设置数据时,此方法不起作用。请参见以下小提琴:jsfiddle.net/bryandowning/tySWC-同样,该.find()方法搜索前面选择器的子代。在给出的示例中,data-selected是的属性.navlink,而不是的子级.navlink。而且,$('div p')$('div').find('p')本质上是等效的。.find()由于额外的函数调用,使用它的速度似乎较慢(尽管我对此并不满意)。如果我对此有误,请纠正我(我真的希望此方法有效)。
布莱恩·唐宁

3
有两件事情:1)没错,如果您使用设置数据,这是行不通的.data(),因为jQuery搜索DOM,所以我将其发布给那些因其他原因而遇到此问题的人(如我);2)正确,.find()通过子级搜索,因此在此示例中是错误的;3)您错了,它们并不等效,因为jQuery从右到左搜索,请参阅jonraasch.com/blog/…–
StefanoP

2
投赞成票$('[data-selected]')可以帮助我解决类似问题$('ul.categories a[data-categories_id]').click(......);
卢克·考辛斯

另外,似乎如果使用.attr更新data属性,如果使用.data检索数据属性,则该值将不会更新-因此,将两者混合使用时要格外小心
Fabio Lolli

13

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

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

您的意思是插件方法,否则与接受的答案相同...
jave.web,

@ jave.web确实。但并非所有人都知道如何将其变成插件。更新了语言。
mpen

不要误会我的意思,您的回答很好,但是这里的单词非常重要,谢谢您的更新:)
jave.web

8

我注意到了两件事(尽管您写下来时可能是错误的)。

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

-1

听起来比它的价值还多。

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

2)为什么不将类添加到当前选定的元素。然后,您可以在DOM中查询“ .active”类或其他内容。


是的,但是就像我说的那样,我知道还有其他方法可以实现它。我只是停留在是否可以通过data()进行过滤的原因上,以及为什么filter()对我不起作用。不过谢谢
user113716

抱歉。我想念你那部分问题。
Bryan Migliorisi
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.