使用jQuery选择具有不同数据属性的第一个元素

Question

我有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');

但是代码刚刚选择了所有元素(参见这里的小提琴)

我已经找到了类似于这个问题的答案,但它们似乎都依赖于data-attribute事先了解价值并寻找特定价值.是否可以选择具有特定data-cat值的第一个元素而不事先指定值？

Answer 1

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/