0

如果某些条件为真，我正在尝试为每个语句中的元素添加不同的类。这是代码：

$('.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”。任何帮助表示赞赏。

4

2 回答 2

3

您的选择器$('.horizontal > div')会选择具有“水平”类的元素内的所有 div，而不仅仅是具有 6 个子元素的元素。在这两个上，你可能想要$(this).children('div').addClass('spanWhatever');

于 2013-08-05T19:00:53.600 回答
3

为什么不：

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

JS Fiddle 概念验证。

或者，迭代父母，而不是所有孩子（诚然，这是一个昂贵的解决方案）：

$('.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 概念验证。

甚至：

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

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

JS Fiddle 概念验证。

参考：

于 2013-08-05T19:04:58.830 回答