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

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

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

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

似乎没有任何 jQuery : 过滤器符合要求，我尝试了以下方法(在同一个单击事件中) ，但由于某些原因它不能工作:

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

我知道还有其他方法可以实现这一点，但是现在我只是好奇它是否可以通过 .data()来实现。

126353 次浏览
小开

听起来工作太多了。

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

2)为什么不在当前选定的元素中添加一个类。然后您可以在 DOM 中查询。“活跃”班级之类的。

小开

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

  1. 在第一个示例中漏掉了一个点($('.navlink').click)
  2. 要使筛选器工作，必须返回一个值(return $(this).data("selected")==true)
小开
最佳答案

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

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

顺便说一句，可以使用 jQuery 对数据进行过滤(这个问题很老了，而 jQuery 从那时起就开始发展了，所以编写这个解决方案也是正确的) :

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

或者，更好的(为了表现) :

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

或者，如果你想得到 data-selected设置的所有元素:

$('[data-selected]')

注意 ，这个方法只能处理通过 html 属性设置的数据。如果使用 .data()调用设置或更改数据，则此方法将不再有效。

小开

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

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

提交答案