jquery - 如何迭代数组并单独设置类？

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');