अलग डेटा-विशेषता वाले पहले तत्वों का चयन करने के लिए jQuery का उपयोग करना - jquery, सरणियाँ, jquery- चयनकर्ता, कस्टम-डेटा-विशेषता

मुझे एक मिल गया है ul विभिन्न मदों में, जिनमें से कई संभव हो सकते हैं data-attribute मूल्यों, इस तरह:

<ul>
<li id="li1" data-cat="one">test item
<li id="li2" data-cat="one">test no 2
<li id="li3" data-cat="two">test dummy
<li id="li4" data-cat="three">test no 4
<li id="li5" data-cat="three">more test
<li id="li6" data-cat="three">test no 6
</ul>

मैं प्रत्येक विशिष्ट के पहले आइटम का चयन करने के लिए jQuery का उपयोग करने का प्रयास कर रहा हूं data-cat मूल्य - तो इस उदाहरण के लिए, li#li1, li#li3, तथा li#li4। मैंने प्रत्येक तत्व की एक सरणी बनाने की कोशिश की है data-attribute, फिर के साथ छँटाई .unique इस तरह

var list = $( "[data-cat]" ).get();
listSorted = jQuery.unique( list );
$( listSorted ).addClass("active");

लेकिन कोड ने सभी तत्वों को चुना (यहाँ देखें)

मुझे लगता है जैसे SO पर उत्तर मिले यह वाला वे करीब आते हैं, लेकिन वे सभी को जानने पर भरोसा करने लगते हैं data-attribute पहले से मूल्य और उस विशिष्ट मूल्य के लिए खोज। क्या किसी विशेष के साथ पहले तत्व का चयन करना संभव है data-cat मानों को पहले से निर्दिष्ट किए बिना मान?

उत्तर:

var cats = {};
var list = $( "[data-cat]" ).filter(function(){
var category = $(this).data("cat");

if(cats[category]){
// category already accounted for, return false
return false;
} else {
// first of this category
cats[category] = true;
return true;
}
});

http://jsfiddle.net/nB3ru/5/