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

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代码，如选择器或过滤器函数或其他东西。 任何想法？

小提琴

Answer 1

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

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

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

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

小提琴

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

试试这个，使用带有$.unique .map()

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

演示

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