jquery 的独特属性值

Question

有没有办法获取某个属性的所有唯一值。

例如

<div class="bob" data-xyz="fish"></div>
<div class="bob" data-xyz="dog"></div>
<div class="bob" data-xyz="fish"></div>
<div class="bob" data-xyz="cat"></div>
<div class="bob" data-xyz="fish"></div>

我需要获取 div.bob 上 data-xyz 属性的所有不同值，

所以它应该返回鱼、狗和猫。

Answer 1

小代码：创建一个对象并设置“狗”“鱼”“猫”属性。这将使它们独一无二。然后从对象中获取唯一的属性名称。简单又容易：

var items = {};
document.querySelectorAll('div.bob').forEach(function(element) {
    items[element.dataset['xyz']] = true; 
});

var result = new Array();
for(var i in items)
{
    result.push(i);
}
alert(result);

---

注意，2011 年的原始答案和 Fiddle 使用 jQuery 来查找和迭代元素并读取数据属性，但使用 JavaScript 就像上面所示的一样简单。

旧循环：

$('div.bob').each(function() {
    items[$(this).attr('data-xyz')] = true; 
});

http://jsfiddle.net/GxxLj/1/

Answer 2

跟踪您已经处理过的值：

var seen = {};

var values = $('div.bob').map(function() {
    var value = this.getAttribute('data-xyz');
    // or $(this).attr('data-xyz');
    // or $(this).data('xyz');

    if(seen.hasOwnProperty(value)) return null;

    seen[value] = true;
    return value;
}).get();

参考：

$.map()

当然，这只适用于原始值。如果您要映射到对象，则必须重写对象的

toString()

方法，以便它们可以用作键。

或者作为插件：

(function($) {

    $.fn.map_unique = function(callback) {
        var seen = {};
        function cb() {
            var value = callback.apply(this, arguments);
            if(value === null || seen.hasOwnProperty(value)) {
                return null;
            }
            seen[value] = true;
            return value;
        }
        return this.map(cb);
    });

}(jQuery));

Answer 3

var array = $('div.bob').map(function() { return $(this).data('xyz'); });

这将返回所有值。然后你可以通过一个独特的函数来运行它。

如何创建具有唯一元素的数组（即删除重复项）？

function ArrNoDupe(a) {
    var temp = {};
    for (var i = 0; i < a.length; i++)
        temp[a[i]] = true;
    var r = [];
    for (var k in temp)
        r.push(k);
    return r;
}
array = ArrNoDupe(array);