Question

我有这样的HTML：

<div data-value="a"></div>
<div data-value="b"></div>
<div data-value="c"></div>
<div data-value="d"></div>
<div data-value="a"></div>
<div data-value="d"></div>
<div data-value="e"></div>

我想使用jQuery选择具有不同 data-value属性的所有div。

这是我的尝试：

$( document ).ready(function() {
    $('div[data-value]').each(function(){
        var value = $(this).data("value");
        console.log(value);
    });
});

这当然会打印出所有出现的事件：a, b, c, d, a, d, e。

相反，我只需打印每个值的第一次出现：a, b, c, d, e。

是的，我可以使用数组将元素放入其中并检查它是否已存在并执行我的操作，但我正在寻找一个紧凑而优雅的jQuery代码，如选择器或过滤器函数等。有什么想法吗？

Fiddle

Answer 1

我想用jquery选择具有不同数据值属性的所有div   ....
   像选择器或过滤器功能或东西
  ....

我假设其他人没有读过这个问题，而你真的想要选择具有唯一数据属性的元素，而不仅仅是获取具有这些属性值的数组。

过滤器在这里似乎是正确的方法，检查当前迭代的元素是否是第一个具有data-value等的元素

$('div[data-value]').filter(function(_, x) {
    return $('div[data-value="' + $(x).data('value') + '"]').get(0) === this;
});

FIDDLE

Answer 2

您可以将.map()与.unique()

一起使用

$( document ).ready(function() {
    var arr = $('div[data-value]').map(function(){
        return $(this).data("value");
    }).get();
    console.log(jQuery.unique(arr));
});

DEMO

Answer 3

试试这个，将.map()与$.unique

一起使用

$( document ).ready(function() {
    var dataValues = $('div[data-value]').map(function(){
        return $(this).data("value");
    }).get();
    console.log($.unique(dataValues));
});

Demo

Answer 4

尝试使用jquery中的$.inArray

var  tempArray = [];

$('div[data-value]').each(function(){
        var value = $(this).data("value");
        if($.inArray(value , tempArray) <= -1){
             tempArray.push(value);
        }
    });

console.log(tempArray);

DEMO

jQuery选择器只获取每个值的第一次出现

4 个答案:

Demo