使用jQuery將類添加到一組父元素的第一個孩子

我已經搜索了hi和low，並且在盯着此代碼庫的其餘部分盯了太多小時之後，對這個看似簡單的函數的回答正在逃避我。使用jQuery將類添加到一組父元素的第一個孩子

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）沒有用，我出來的咖啡引導。

任何幫助，非常感謝！謝謝。

來源

2013-04-30 revive

BTW你的''缺少必需的'href'屬性 – Ejaz 2013-04-30 23:44:15

'hasClass'返回true/false時，不是一個可鏈接的對象 – Madbreaks 2013-04-30 23:45:39

您可以考慮使用'.element-link'的'background-image'代替在每一個嵌入圖像 – Madbreaks 2013-04-30 23:49:10

hasClass返回true或false，所以你不能鏈接它進一步與.first()。

這麼說，你應該緩存所有的鏈接，然後進行篩選：

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

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

來源

2013-04-30 23:45:19 moonwave99

-1

也許我的代碼是不是很好，但應該工作。

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

來源

2013-04-30 23:45:30 WooCaSh

-1太脆。雖然這可能適用於給定的代碼示例，但它假定類別始終分組，並且如果有任何重疊將會失敗。此外，它效率低下，循環所有'元素鏈接'元素 – Madbreaks 2013-04-30 23:51:17

但在這種情況下，它會工作。我用這個指定的html代碼回答這個問題。你有評論的權利，但不應該減去我。 – WooCaSh 2013-04-30 23:56:11

這是實現的另一種方式，它

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

來源

2013-04-30 23:51:49 Ejaz

+1你也打敗了我吧。我想要一個'for（var i in cats）'比'for'循環的標準更好，但是，嘿，那只是我。我認爲這是一種優越的方法，因爲它不需要迭代所有'.element-link'元素。 – Madbreaks 2013-04-30 23:57:31

謝謝。通過緩存'$（'a.element-link'）';還有一些優化空間;） – Ejaz 2013-05-01 00:14:54

使用jQuery將類添加到一組父元素的第一個孩子

回答

相關問題