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个子元素的div。在这两个方面，您可能需要$(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

参考文献：

如果某些条件为真，则要为每个元素设置一个类

2 个答案: