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上のデータ-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));