如何使用jQuery添加第n个项类

How to add nth-item classes with jQuery

本文关键字：何使用 jQuery 添加      更新时间：2023-09-26

http://jsfiddle.net/JamesKyle/y7hBQ/

我正在制作一个简单的jquery计数函数，它添加了以下类：

  1. 第一个&最后
  2. 偶数&奇数
  3. 第n项-#(按顺序计数(
  4. 第n项--#(倒计数(

前两个我做得很容易，但后两个给我带来了麻烦，因为我是jQuery/Javascript 的新手

你可以在这里看到jsfiddle：http://jsfiddle.net/JamesKyle/y7hBQ/

这是我目前使用的代码：

$(document).ready(function() {
    $('.count, ul').each(function() {
        var countChildren = $(this).children();
        $(countChildren).filter(':even').addClass('even');
        $(countChildren).filter(':odd').addClass('odd');
        $(countChildren).first().addClass('first');
        $(countChildren).last().addClass('last');
        var numberOfChildren = $(countChildren).size();
        // $(countChildren).addClass('nth-item-' + #);
        //                                        ⬆
        //                           Fill with the elements number
        // $(countChildren).addClass('nth-item--' + #);
        //                                         ⬆
        //                   Fill with the elements number (negative count)
    });
});

我只关注评论出来的行

这里是jsfiddle：http://jsfiddle.net/JamesKyle/y7hBQ/

提前感谢！

更新：

我下面有两个解决方案，我计划大规模使用它，所以如果你能推荐什么是最有效的方法，它会对我有很大帮助！谢谢

编辑：请参阅this fiddle以获得纯CSS解决方案。它不需要任何JavaScript(使用:nth-child选择器(。

使用.index()方法获取元素集合中当前元素的索引。此外，由于.children()返回一个jQuery对象，因此没有必要将countChildren封装在$中。

为了澄清，下面的代码使用从1和-1开始的索引(正如CSS代码中所暗示的那样(。

演示：http://jsfiddle.net/y7hBQ/18/

$(document).ready(function() {
    $('.count, ul').each(function() {
        var countChildren = $(this).children();
        countChildren.filter(':even').addClass('even');
        countChildren.filter(':odd').addClass('odd');
        countChildren.first().addClass('first');
        countChildren.last().addClass('last');
        var numberOfChildren = countChildren.size();
        countChildren.each(function(i){
            var posindex = countChildren.index(this) + 1,
                         //^ This can be replaced by i + 1, for efficiency
                negindex = numberOfChildren - posindex + 1;
            $(this).addClass('nth-item-' + posindex)
                   .addClass('nth-item--' + negindex);
        });
    });
});

如果每个效率都计数，那么您应该考虑减少迭代；

$('.count, ul').each(function() {
    var $children = $(this).children(),
        count = $children.size(),
        $item;
    $children.each(function(i) {
        $item = $(this)
            .addClass(i % 2 === 0 ? 'even' : 'odd')
            .addClass('nth-item-' + (i + 1))
            .addClass('nth-item--' + (count - i));
        if (i === 0) {
            $item.addClass('first');
        }
        if (i == count - 1) {
            $item.addClass('last');
        }
    });
});

通过这种方式，您只对子对象进行一次迭代。当你使用过滤器时，它会根据你的过滤器来迭代和过滤项目。jsFiddle在这里。

这里有一个小基准。

如果我理解正确，这是：

$(document).ready(function() {
    $('.count, ul').each(function() {
        var countChildren = $(this).children();
        countChildren.filter(':even').addClass('even');
        countChildren.filter(':odd').addClass('odd');
        countChildren.first().addClass('first');
        countChildren.last().addClass('last');
        var numberOfChildren = countChildren.size();
        countChildren.each(function(i) {
            $(this).addClass('nth-item-'  + (i + 1) )
                   .addClass('nth-item--' + (numberOfChildren - i) );
        });
    });
});

jsFiddle

我想你要找的是：

var count = countChildren.length;
countChildren.each(function(index) { 
    $(this).addClass('nth-item-'+index);
           .addClass('nth-item--'+(count-1-index));
});

也许有一种更快的方法可以做到这一点，但是。。。。希望这对你有用。

相关文章：