Question

甚至可能没有解决方案......或者它可能相当复杂（或者更容易在我面前轻松而正确，但我很想念它。）

我有一个包含多个单元格的表格（它有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

使用a，b等的一些css类

我的问题是，为了在下一个单元格上具有相同的功能，虽然它可能需要是不同的颜色，但是使用不同的类/ id名称在jquery中重复整个if语句。有没有更好的方法来简化这一点，也许只需要一个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>

Answer 1

您可以使用：

$(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]);
    });
});

Answer 2

此外，您可以使用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;
        // ...
    }

});

压缩多个jquery if语句

2 个答案: