Question

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

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

第一＆amp;最后

Even＆amp;奇

nth-item-＃（按顺序排列）

nth-item - ＃（向后计数）

前两个很容易完成，但后两个给我带来麻烦，因为我是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/

提前致谢！

更新：

下面我有两个解决方案，我打算大规模使用它，所以如果你能推荐一些最有效的方式，它会对我有很大的帮助！谢谢！

Answer 1

修改：有关纯CSS 解决方案，请参阅 this fiddle 。它不需要任何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);
        });

    });
});

Answer 2

如果我理解正确，请：

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

Answer 3

我认为你在寻找的是：

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

可能有更快的方法来做到这一点，但......希望这适合你。

Answer 4

如果每个效率都计算在那么你应该考虑减少迭代次数;

$('.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 here

一点基准是here。

如何使用jQuery添加nth-item类

4 个答案: