Question

我一直在低调搜索，经过太多时间盯着这个代码库的其余部分后，这个看似简单的函数的答案就是在逃避我。

HTML如下：

<a class="element-link local" data-category="local">
    <img src="http://placehold.it/48x48/eee/eee.png"  class="logo" alt="" />
</a>
<a class="element-link local" data-category="local">
    <img src="http://placehold.it/48x48/eee/eee.png"  class="logo" alt="" />
</a>
<a class="element-link news" data-category="news">
    <img src="http://placehold.it/48x48/eee/eee.png"  class="logo" alt="" />
</a>
<a class="element-link news" data-category="news">
    <img src="http://placehold.it/48x48/eee/eee.png"  class="logo" alt="" />
</a>
<a class="element-link business" data-category="business">
    <img src="http://placehold.it/48x48/eee/eee.png"  class="logo" alt="" />
</a>
<a class="element-link business" data-category="business">
    <img src="http://placehold.it/48x48/eee/eee.png"  class="logo" alt="" />
</a>
<a class="element-link business" data-category="business">
    <img src="http://placehold.it/48x48/eee/eee.png"  class="logo" alt="" />
</a>
<a class="element-link business" data-category="business">
    <img src="http://placehold.it/48x48/eee/eee.png"  class="logo" alt="" />
</a>

我要做的是定位每个类别的第一个孩子，并为其添加一个类。因此，FIRST新闻，商业等（针对每个类别）将添加一个类。例如，这是我的JS：

$container.find('.element-link').each(function(){
    var category = $(this).data('category'); 
    $(this).hasClass(category).first().addClass('new');
});

我尝试了各种迭代：首先，：第一个孩子，：eq（1）无济于事，而且我没有咖啡来启动。

非常感谢任何帮助！感谢。

Answer 1

hasClass会返回true或false，因此您无法使用.first()进一步链接。

这样说，你应该缓存所有链接，然后过滤它们：

var $links = $container.find('.element-link');

$links.each(function(){
    var category = $(this).data('category'); 
    $links.find('.' + category).first().addClass('new');
});

Answer 2

这是实现它的另一种方式

        //get all unique "category" values
        var cats = $.unique($('a.element-link').map(function(){
           return $(this).data('category')
        }).get());

        //add classes to first element of each "category"
        for (var x =0; x < cats.length; x++){
           $('a.element-link[data-category="'+cats[x]+'"]:first').addClass('new');
        }

Answer 3

也许我的代码不好但应该有用。

var oldCategory = '';
$container.find('.element-link').each(function(){
    var category = $(this).data('category');
    if(oldCategory != category)
        $(category).addClass('new');
    oldCategory = category;
});

使用jQuery将Class添加到一组父元素的第一个子元素

3 个答案: