如何使用jQuery添加nth-item类

时间:2011-11-30 21:36:30

标签: javascript jquery class css-selectors

  

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

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

  
      
  1. 第一&最后
  2.   
  3. Even&奇
  4.   
  5. nth-item-#(按顺序排列)
  6.   
  7. nth-item - #(向后计数)
  8.   

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

提前致谢!

  

更新:

     

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

4 个答案:

答案 0 :(得分:3)

修改:有关纯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);
        });

    });
});

答案 1 :(得分:1)

如果我理解正确,请:

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

答案 2 :(得分:1)

我认为你在寻找的是:

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

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

答案 3 :(得分:1)

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

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