使用Jquery/javascript为span分配奇偶类

我只是坚持用Jquery将奇数/偶数类分配给span

问题更新

我需要将类添加到span-inside-col-div中，作为“奇数”/“偶数”。检查注释的类名和执行顺序&我需要以这种方式分配

预期输出：类名在注释中

<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>

(1)
(5)
(8)
(10)
(11)
(2)
(6)
(9)
(3)
(4)
(7)

看看这个

使用

.col>

确保不会影响页面上的其他跨距

我已经根据新的要求进行了更新

$(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++;
            }
        })
    }
});

$（函数（）{
var currentClass='奇数'；
var currentRow=0；
var更新=真；
while（更新）{
更新=错误；
$（'.col'）。每个（函数（索引、值）{
var currentSpans=$（值）.find（'span'）；
if（currentRow

基本答案：

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

更好的性能答案：

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

编辑 包括Jquery文档信息：

因为：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");
  }
});

---

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

---

如果需要更多控制，可以自己迭代跨度

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

---

编辑：现在已经测试过了

请大家检查评论过的类名。我不分配奇偶或每列。我寻找奇偶整体跨度如果您自己迭代跨度集合，您可以拥有这样一个控件。查看我的答案。@OzrenTkalčecKrznarić请检查我更新的问题

s是如何生成的？请在被否决之前解释所需的执行顺序。更新的答案解释为什么性能更好是第二个选项。直接在css中使用第n个子项如何。这将提供最好的性能，对吗？但n个孩子为容器工作，我的意思是，他需要在不同的容器中使用偶数/奇数。@Yontam Omer Great Dude。工作如预期。np mate:）我已经提高了一点效率-看看新代码。w3schools.com应该被禁止

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