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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1009485/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 10:23:53  来源:igfitidea点击:

Filter element based on .data() key/value

jqueryfilter

提问by user113716

Say I have 4 div elements with class .navlink, which, when clicked, use .data()to set a key called 'selected', to a value of true:

假设我有 4 个带有 class 的 div 元素.navlink,当单击它们时,用于.data()将名为 的键设置'selected'为值true

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

Every time a new .navlinkis clicked, I would like to store the previously selected navlinkfor later manipulation. Is there a quick and easy way to select an element based on what was stored using .data()?

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

There don't seem to be any jQuery :filtersthat fit the bill, and I tried the following (within the same click event), but for some reason it doesn't work:

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

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

I know that there are other ways to accomplish this, but right now I'm mostly just curious if it can be done via .data().

我知道还有其他方法可以做到这一点,但现在我主要只是好奇是否可以通过.data().

回答by BaroqueBobcat

your filter would work, but you need to return true on matching objects in the function passed to the filter for it to grab them.

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

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

回答by StefanoP

Just for the record, you canfilter on data with jquery (this question is quite old, and jQuery evolved since then, so it's right to write this solution as well):

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

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

or, better (for performance):

或者,更好(为了性能):

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

or, if you want to get all the elements with data-selectedset:

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

$('[data-selected]')

Notethat this method will only work with data that was set via html-attributes. If you set or change data with the .data()call, this method will no longer work.

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

回答by mpen

We can make a plugin pretty easily:

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

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

Usage (checking a radio button):

用法(检查单选按钮):

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

回答by Thomas

Two things I noticed (they may be mistakes from when you wrote it down though).

我注意到两件事(不过,它们可能是你写下时的错误)。

  1. You missed a dot in the first example ( $('.navlink').click)
  2. For filter to work, you have to return a value ( return $(this).data("selected")==true)
  1. 您在第一个示例中遗漏了一个点 ( $('.navlink').click)
  2. 要使过滤器起作用,您必须返回一个值 ( return $(this).data("selected")==true)

回答by Bryan Migliorisi

Sounds like more work than its worth.

听起来比它的价值更多的工作。

1) Why not just have a single JavaScript variable that stores a reference to the currently selected element\jQuery object.

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

2) Why not add a class to the currently selected element. Then you could query the DOM for the ".active" class or something.

2) 为什么不给当前选中的元素添加一个类。然后你可以查询 DOM 中的“.active”类或其他东西。