将ODD / EVEN类分配给Jquery / javascript

Question

我只是坚持分配ODD / EVEN类跨越Jquery。

问题已更新

我需要添加类以跨越col div内部为“ odd” /“ even”。检查注释的类名称和执行顺序，我需要以这种方式分配。

预期输出：类名称在注释中

<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

看看这个工作的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++;
            }
        })
    }
});