3

我有一个这样的 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 代码，例如选择器或过滤器函数或其他东西。任何想法？

小提琴

4

4 回答 4

4

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

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

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

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

小提琴

于 2014-07-16T09:02:49.243 回答
3

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

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

演示

于 2014-07-16T08:52:26.080 回答
2

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

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

演示

于 2014-07-16T08:53:04.903 回答
0

$.inArray在 jquery 中尝试

var  tempArray = [];

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

console.log(tempArray);

演示

于 2014-07-16T08:53:43.437 回答