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

Posted 2023-03-05

【中文标题】使用 jQuery 选择具有不同数据属性的第一个元素

【英文标题】：Using jQuery to select first elements with distinct data-attribute

【发布时间】：2014-06-10 06:35:57

【问题描述】：

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

但代码只是选择了所有元素（see fiddle here）

我已经找到了类似this one 这样的答案，但它们似乎都依赖于事先知道data-attribute 的值并搜索该特定值。是否可以在不事先指定值的情况下选择具有特定 data-cat 值的第一个元素？

【参考方案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/

【讨论】：

矿井只需将addClass 链接到filter -> 无论哪种方式，+1

@tymeJV 我在小提琴中做了，只是在答案中分离出过滤器，因为我不确定 addClass 真的是最终目标。

@JamesMontagne 让我觉得自己像个白痴的方式；这很棒，看起来与我解决问题的糟糕尝试大不相同！你说得对，addClass 并不是真正的目标，我只是把它放在那里帮助我看看选择了什么。