想要爲每個元素設置一個類，如果某些條件爲真

Question

如果某些條件爲真，我試圖給每個語句中的元素添加一個不同的類。這裏是代碼：

$('.horizontal').each(function() {    
      if($(this).children().size() == 3){ 
       console.log('the number 3') 
       $('.horizontal > div').addClass('span4'); 
      } 
      if($(this).children().size() == 6){ 
       console.log('the number 6') 
       $('.horizontal > div').addClass('span2'); 
      } 
     }); 

問題是，我設置所有與最後一個if語句，而不是獨立分配一個基於輸出的類。所以，如果我有一個有3個孩子的元素，然後有6個孩子，那麼他們都會得到'span2'。任何幫助表示讚賞。

Answer 1

您的選擇器$('.horizontal > div')選擇「水平」類元素中的所有div，而不僅僅是具有6個子元素的元素。在這兩個的，你可能想$(this).children('div').addClass('spanWhatever');

Answer 2

爲什麼不：

$('.horizontal').children().addClass(function(){ 
    switch ($(this).parent().children().length) { 
     case 3: 
      return 'span4'; 
      break; 
     case 6: 
      return 'span2'; 
      break; 
    } 
}); 

JS Fiddle proof-of-concept。

另外，遍歷的父母，而不是所有的孩子（其中，不可否認，是一個昂貴的解決方案）的：

$('.horizontal').each(function(){ 
    var self = $(this), 
     newClass; 
    switch (self.children().length) { 
     case 6: 
      newClass = 'span2'; 
      break; 
     case 3: 
      newClass = 'span4'; 
      break; 
     default: 
      newClass = ''; 
      break; 
    } 
    self.children().addClass(newClass); 
}); 

JS Fiddle proof-of-concept。

甚至：

var classes = { 
    '3' : 'span4', 
    '6' : 'span2' 
}; 

$('.horizontal').each(function(){ 
    var self = $(this), 
     kids = self.children(); 
    kids.addClass(classes[kids.length] || ''); 
}); 

JS Fiddle proof-of-concept。

參考文獻：

• addClass()。
• children()。
• each()。
• parent()。