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

Question

我已经搜索了hi和low，并且在盯着此代码库的其余部分盯了太多小时之后，对这个看似简单的函数的回答正在逃避我。

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> 

我试图做的是针对类别中的各一个的第一个孩子，并添加一个类到它。所以，第一条新闻，商业等（每个类别）都会增加一个类。例如，这是JS我有：

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

我已经试过的各种迭代：第一，：第一胎，：公式（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

也许我的代码是不是很好，但应该工作。

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

Answer 3

这是实现的另一种方式，它

 //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'); 
     }