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>项（我的数组的相同数量），但之后就会停止运行。< / p>

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

感谢。

Answer 1

您可以按照数组的长度使用index和divide来获取动态添加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 。我给了li一些自定义颜色，让它看起来更加醒目。希望这有帮助

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

1 个答案: