Question

我只是坚持使用Jquery分配ODD / EVEN类。

问题更新

我需要在col div中添加class to span “odd”/“even”。检查注释的类名和执行顺序＆amp;我需要以这种方式分配。

预期输出：班级名称在评论中

<section>

    <div class="col">
        <span></span> <!-- ODD --> (1)
        <span></span> <!-- ODD --> (5)
        <span></span> <!-- EVEN--> (8)
        <span></span> <!-- ODD--> (10)
        <span></span><!-- EVEN--> (11)
    </div>

    <div class="col">
        <span></span><!-- EVEN--> (2)
        <span></span><!-- ODD-->  (6)
        <span></span><!-- EVEN--> (9)
    </div>

    <div class="col">
        <span></span><!-- ODD --> (3)

    </div>
    <div class="col">
        <span></span><!-- EVEN--> (4)
        <span></span><!-- ODD-->  (7)
    </div>

</section>

Answer 1

看看这个working jsFiddle。

$(function(){
    $('.col > span:odd').addClass('odd');
    $('.col > span:even').addClass('even');
});

使用.col >确保您不会影响页面上的其他跨度。

我已根据新要求更新了jsFiddle。

$(function(){
    var currentClass = 'odd';
    var currentRow = 0;
    var updated = true;

    while(updated){
        updated = false;
        $('.col').each(function(index,value){
            var currentSpans = $(value).find('span');
            if(currentRow < currentSpans.length){
                currentSpans.eq(currentRow).addClass(currentClass);
                currentClass = (currentClass == 'odd') ? 'even':'odd';
                updated = true;
            }
            if($(value).is(':last-child')){
                currentRow++;
            }
        })
    }
});

Answer 2

基本答案：

$('span:odd').addClass("odd");
$('span:even').addClass("even");

更好的表现答案：

$('span').filter(':odd').addClass("odd");
$('span').filter(':even').addClass("even");

修改包括Jquery文档信息：http://api.jquery.com/odd-selector/

因为：odd是jQuery扩展而不是CSS规范的一部分，使用：odd的查询无法利用本机DOM querySelectorAll（）方法提供的性能提升。要在使用时获得最佳性能：奇数选择元素，首先使用纯CSS选择器选择元素，然后使用.filter（“：odd”）。

修改要回答编辑过的问题：

var rowIdx = 0; var actualClass = "odd"; $('.col').each(function(){ var $col = $(this); var $span = $col.find("span").eq(rowIdx); if ($span.length > 0) { $span.addClass(actualClass); actualClass = (actualClass == "odd" ? "even" : "odd"); } });

Answer 3

如果您需要更多控制权，可以自行迭代跨度。

$(function() {
    $.each($("div > span"), function(idx, span) {
        if(idx % 2 == 0)
            $(span).addClass("even");
        else
            $(span).addClass("odd");
    })
})

编辑：现在已经过测试

了

Answer 4

你也可以使用css的第n个子属性，为每个span分配相同的类，并使用偶数奇数来执行操作

http://www.w3schools.com/cssref/sel_nth-child.asp

将ODD / EVEN类分配给Jquery / javascript

4 个答案: