凝結多發性jQuery的if語句

可能沒有甚至是一個解決方案......或者也可能是比較複雜的（或者更可能的方便，就在我的面前，但是我很想念它。）凝結多發性jQuery的if語句

我有一個表格，有多個單元格（它有12個，但我將使用2作爲示例），並且在每個單元格中有一個<ul>，它們的編號不同<li>。根據使用多少個<li>（最多10個），我想要應用不同的顏色。

所以使事情非常簡單，例如可以說..

<table> 
<tr> 
<td> <ul> <li>just a test</li> </ul> </td> 
<td> <ul> <li>Another test</li> <li>and another</li> </ul> </td> 
</tr> 
</table>

並讓說，對於一個項目的列表我想要的顏色綠色，有兩個項目我想要的紅色。我可以在第一個單元格中使用這樣的jQuery。

$(document).ready(function() { 
var count = $("a class name for the list").children("li").length 
if (count == 1) { 
$("a class name for the cell").addClass("a") } 
else if (count == 2) { 
$("a class name for the cell").addClass("b") } 
etc

有了一些CSS類A，B等

我的問題是，爲了對下一個單元格相同的功能，但獨立的，因爲它可能需要一個不同的顏色在jQuery中使用不同的類/ id名稱重複整個if語句。有沒有更好的方法來簡化這一點，也許只需要一個如果陳述...或至少更少？

如果有一個解決方案，它使任何差異，每個小區的實際積聚是像這樣（使用第一小區作爲例子）：

<td><div class="month"><h3>January</h3><ul><li>list stuff</li></ul></div></td>

每個小區使用類每月它只是在CSS文件中包含一些佈局信息。

編輯：包含更完整的表格佈局。此表中還有三行，全部設置相同。

<table class=table> 
<tr> 
<td><div class="month"><h3>January</h3><ul class=a><li>testing</li><li>testing</li><li>testing2</li></ul></div></td> 
<td><div class="month"><h3>February</h3><ul class=b><li>testing</li></ul></div></td> 
<td><div class=month><h3>March</h3><ul class=c><li>testing</li></ul></div></td> 
</tr> 
</table>

來源

2014-01-07 Umbr44

你可以使用：

$(document).ready(function() { 
    //classes could be set on any outerscope, as global e.g 
    var classes = ["a", "b"];    
    $("table").find("ul").each(function() { 
     var count = $(this).find('li').length; 
     if (!count) return; //return nothing is aka continue statement inside each loop   
     $(this).closest("div").addClass(classes[count - 1]); 
    }); 
});

來源

2014-01-07 11:51:14

我要寫關於使用switch語句，但我更喜歡你的解決方案。 – pedalpete

我應該提到我，說到雅緻，當談到jquery時，我會說一個完整的noob ...我會在哪裏放置這個，我嘗試了一些替代方法，但它沒有奏效。 – Umbr44

我只是爲了完整而寫的，但這個答案的確在這個案例中勝出。 –

此外，您還可以利用一個switch聲明。

$(function() { 

    switch ($('.list-class').children('li').length) { 
     case 1: 
      $('.cell-class').addClass('foo'); 
      break; 
     case 2: 
      $('.cell-class').addClass('bar'); 
      break; 
     case 3: 
      $('.cell-class').addClass('baz'); 
      break; 
     // ... 
    } 

});

來源

2014-01-07 11:59:12

雖然我們都同意上述答案在這種情況下更好，但感謝您的選擇。 – Umbr44

凝結多發性jQuery的if語句

回答

相關問題