сжать несколько JQuery, если заявления

0

может даже не быть решением этого... или это может быть довольно сложно (или, скорее, легко и прямо передо мной, но я не хватает его).

У меня есть таблица с несколькими ячейками (у нее 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 и т.д.

Моя проблема заключается в том, что для того, чтобы иметь одну и ту же функцию в следующей ячейке, хотя и независимой, так как может потребоваться другой цвет, нужно повторить весь оператор if в jquery, используя разные имена классов/идентификаторов. Есть ли лучший способ обтекания этого, возможно, только один оператор 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>
Теги:
if-statement

2 ответа

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]);
    });
});
Поделиться
  • 0
    Я собирался написать об использовании оператора switch, но мне больше нравится ваше решение.
  • 0
    Вероятно, я должен упомянуть, что я, если говорить элегантно, полный нуб, когда дело доходит до jquery ... где бы я это выразил, я попробовал пару альтернатив, но это не сработало.
Показать ещё 7 комментариев
0

Кроме того, вы можете использовать оператор 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;
        // ...
    }

});
Поделиться
  • 0
    Хотя мы оба согласны с тем, что ответ в этой ситуации лучше, спасибо за альтернативу.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню