jQuery选择器仅获取每个值的第一次出现答案

【问题标题】：jQuery selector to get just the first occurrence of every valuejQuery选择器仅获取每个值的第一次出现
【发布时间】：2014-09-06 17:08:54
【问题描述】：

我有一个这样的 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

【问题讨论】：

标签： jquery jquery-selectors each no-duplicates jquery-filter

【解决方案1】：

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

我假设其他人没有阅读该问题，并且您确实想选择具有唯一数据属性的元素，而不仅仅是获取具有这些属性值的数组。

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

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

FIDDLE

【讨论】：

所有其他答案实际上也很好，但并不完全符合我的要求。这是我的正确答案。谢谢大家

【解决方案2】：

您可以将.map() 与.unique() 一起使用

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

DEMO

【讨论】：

【解决方案3】：

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

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

Demo

【讨论】：

【解决方案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

【讨论】：