jQuery的唯一屬性值

Question

有沒有辦法獲得某個屬性的所有唯一值。

e.g

<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數據XYZ屬性，

所以它應該返回魚，狗和貓。

Answer 1

小碼：創建一個對象，讓「狗」「魚」「貓」的屬性。這將使他們獨一無二。然後從對象中獲取唯一的屬性名稱。簡單易用：

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

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

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

Answer 2

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

這將返回所有值。然後你可以通過一個獨特的功能來運行它。

How do I make an array with unique elements (i.e. remove duplicates)?

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); 

Answer 3

跟蹤其值，你已經處理：

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));