JQuery-向元素添加交错类

我希望这个标题有意义

简言之，我有5个不同的元素，每个元素都要添加一个不同的类。这5个元素将在一系列中重复，无论需要多少次。因此，在实践中，它将看起来像这样：

等等

我一直在尝试使用第n个孩子和第一个类型，但没有太大的成功

$（'.page关于我们。经理：第n个孩子（5n+1））.addClass（'red'）；
$（'.关于我们的页面。经理：第n个孩子（5n+2）”）.addClass（'blue'）；
$（'.page关于我们。经理：第n个孩子（5n+3）”）.addClass（'green'）；
$（'.page关于我们。经理：第n个孩子（5n+4）”）.addClass（'orange'）；
$（'.关于我们的页面。经理：第n个孩子（5n+5'））.addClass（'pink'）；

我不认为这是接近所以任何指针赞赏

---

谢谢

在您的选择器中，您正在使用

class='manager'

查找元素内部的

class='page-about-us'

您的div没有

class='manager'

，因此它没有选择任何元素

所以，这取决于你的结构和你想做什么

<div class='page-about-us'>
    <div class='manager'>test</div>
    <div class='manager'>test</div>
    <div class='manager'>test</div>
    <div class='manager'>test</div>
    <div class='manager'>test</div>
    <div class='manager'>test</div>
    <div class='manager'>test</div>
    <div class='manager'>test</div>
    <div class='manager'>test</div>
    <div class='manager'>test</div>    
</div>

如果要筛选.manager的子元素，则需要更改选择器

<div class='page-about-us'>
    <div class='manager'>
        <div></div> <!-- trying to target these children div -->
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>        
</div>

这个怎么样

var classes = ['red','blue','green','orange','pink'];
$('.page-about-us .manager').each(function(index, element){
    $(element).addClass(classes[index])
});

或者如果“五块”在“关于我们的页面”中重复出现

var classes = ['red','blue','green','orange','pink'];
$('.page-about-us .manager').each(function(index, element){
    $(element).addClass(classes[index%classes.length])
});

类似于这样的结构：

<div class="page-about-us">
    <div class="manager"></div>
    <div class="manager"></div>
    <div class="manager"></div>
    <div class="manager"></div>
    <div class="manager"></div>

    <div class="manager"></div>
    <div class="manager"></div>
    <div class="manager"></div>
    <div class="manager"></div>
    <div class="manager"></div>
</div>

---

这里是我创建的一个小示例。 以下是供参考的HTML代码：

<button id="add_divs">Add Divs</button>
<div class="div_container">
</div>

添加div

以下是可用于执行逻辑的jQueryCode：

var div_container = $(".div_container");
$("#add_divs").on("click", function(e){
    for(i=0;i<5;i++)
    {
        div_container.append("<div>Test"+i+"</div>");
    }
    console.log($(".div_container div:nth-child(2)").text());
    $(".div_container div:nth-child(5n+1)").addClass("red");
    $(".div_container div:nth-child(5n+2)").addClass("blue");
    $(".div_container div:nth-child(5n+3)").addClass("green");
    $(".div_container div:nth-child(5n+4)").addClass("orange");
    $(".div_container div:nth-child(5n+5)").addClass("pink");
});

var div_container=$（“.div_container”）；
$（“添加分区”）。在（“单击”，函数（e）{
对于（i=0；iYeah，这只是一个疏忽。我现在已经更正了我的帖子。@BertMurphy可以举一个例子来展示你的HTML结构吗？在上面的例子中，它看起来应该可以工作。但是如果它们都没有相同的父级，那就有点小问题了different@BertMurphy这一切都取决于你的结构，以及你想要的div的颜色除了我提供的标记之外，没有更多的内容了。唯一的是一个包装div，其中有一个关于我们的.page类。我想我没有把manager类放在首位，这让我有点困惑。看起来我有很多例子要在这里讲，所以感谢大家。令人尴尬的是，这包括了我在文章中提到的那个例子开始发帖。我不知道我是怎么做到的。不管怎么说，泰德和加布里埃尔有一些有趣的解决方案，我需要学习才能理解。再次感谢。这似乎是一个很好的解决方案。谢谢。哦，我看到你编辑了原始帖子——我将编辑我的来反映
<button id="add_divs">Add Divs</button>
<div class="div_container">
</div>

var div_container = $(".div_container");
$("#add_divs").on("click", function(e){
    for(i=0;i<5;i++)
    {
        div_container.append("<div>Test"+i+"</div>");
    }
    console.log($(".div_container div:nth-child(2)").text());
    $(".div_container div:nth-child(5n+1)").addClass("red");
    $(".div_container div:nth-child(5n+2)").addClass("blue");
    $(".div_container div:nth-child(5n+3)").addClass("green");
    $(".div_container div:nth-child(5n+4)").addClass("orange");
    $(".div_container div:nth-child(5n+5)").addClass("pink");
});