Question

我正在开发一个jquery插件，它可以根据我发送的任何数据生成动态列表。现在，尽管我发送了数据，但6个第一项始终是相同的。

通过相同我的意思是他们的价值观与其他价值观不同，但这些价值观永远不会改变。

sample: item 1, item 2, item 3... item 6 > item 87, item 77

前6个项目我想授予不同的CSS样式，但我似乎无法抓住单个对象这样做。

(function ($) {
    $.fn.addStyles = function () {
        // As the items gets listed in UL LI tags, I take the LI tags using .children()
        var $children = this.children(); 
    }
})(jQuery);

如何遍历此对象集合并单独添加CSS样式？

谢谢。

Answer 1

您无需迭代 - 您可以使用.slice()

$('#list').children('li').slice(0, 6).addClass('oneOfTheFirstSix')

如果您的情况变得更复杂，可以使用.filter()：

$('#list').children('li').filter(function(n) {
    return n % 3 == 0;
}).addClass('everyThirdElement')

根据您更新的问题，这是否符合您的要求？

var listItems = $('#list').children('li');

listItems.eq(0).addClass('theFirstClass');
listItems.eq(1).addClass('theSecondClass');
listItems.eq(2).addClass('the3rdClass');
listItems.eq(3).addClass('the4thClass');
listItems.eq(4).addClass('thePenultimateClass');
listItems.eq(5).addClass('theLastClass');

Answer 2

这就是你需要的：

http://jsbin.com/evaxaj/4/edit

 (function ($)
  {
     $.fn.addStyles = function ()
     {
        return this.each(function (i, n)
        {
           if (i < 1) //change to 6 or...
           $(this).css('color', 'red');
        });
     }
  })(jQuery);
  $('a').addStyles();

如何遍历数组并单独设置类？

2 个答案: