jquery - 将特定类添加到 <li> 元素并重复添加模式

Question

我有一个<ul>列表，我向每个元素添加不同的类。 jQuery 运行良好，但我找不到如何做的是如果列表继续动态增长则重复该模式。

示例

<ul class="portfolio">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>

Jquery

var sizes = ['col-md-6', 'col-md-6', 'col-md-3', 'col-md-6', 'col-md-3'];
    $('.portfolio li').each(function() {
    var index = $(this).index();
    $(this).addClass(sizes[index]);
});

我遇到的问题是我的数组运行一次​​，这意味着这些类只会分配给前 5 个 <li>项目(与我的数组相同数量)，但随后停止运行。

有没有办法重复该数组模式以继续运行并将类应用到 <li>随着列表增长的元素？

谢谢。

Answer 1

您可以使用索引并将其除除以数组的长度，以获得动态添加的li的实际索引

像这样更新你的jquery代码

$(function(){
    var sizes = ['col-md-6', 'col-md-6', 'col-md-3', 'col-md-6', 'col-md-3'];
    $('.portfolio li').each(function() {
        var index = $(this).index();

        var val = index % sizes.length; // this gives you the remainder n u can use that as an index.
        console.log('index - ' + index + ' | val - ' + val);
        $(this).addClass(sizes[val]);
    });
});

这是一个 JSFIDDLE 。我为李提供了一些自定义颜色，使其看起来更明显。希望这有帮助