2

我只是坚持将 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>
4

4 回答 4

5

看看这个工作的 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++;
            }
        })
    }
});
于 2013-06-30T13:20:54.563 回答
4

基本答案：

$('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() 方法提供的性能提升。为了在使用 :odd 选择元素时获得最佳性能，首先使用纯 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");
  }
});
于 2013-06-30T13:21:37.783 回答
1

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

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

编辑：现在它已经过测试

于 2013-06-30T13:27:00.807 回答
0

您还可以使用 css 的第 n 个子属性，将相同的类分配给每个跨度并使用奇偶数来执行操作

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

于 2013-06-30T13:22:13.043 回答