jquery - 使用 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 value - 因此对于这个例子，li#li1、li#li3 和li#li4。我尝试使用 data-attribute 构建每个元素的数组，然后像这样使用 .unique 进行排序

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

但是代码刚刚选择了所有元素 ( see fiddle here )

我找到了类似 this one 的答案很接近，但它们似乎都依赖于事先了解数据属性值并搜索该特定值。是否可以在不事先指定值的情况下选择具有特定 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/