Question

我希望标题有意义。

简而言之，我有5个不同的元素，每个元素都添加了不同的类。然后，这些5个元素将在一系列中重复，但需要多次。所以在实践中它看起来像这样：

<div class="manager red"></div>
<div class="manager blue"></div>
<div class="manager green"></div>
<div class="manager orange"></div>
<div class="manager pink"></div>

<div class="manager red"></div>
<div class="manager blue"></div>
<div class="manager green"></div>
<div class="manager orange"></div>
<div class="manager pink"></div>

等...

我一直在尝试使用n-child和first-of-type但没有太大的成功。

$('.page-about-us .manager:nth-child(5n+1)').addClass('red');
$('.page-about-us .manager:nth-child(5n+2)').addClass('blue');
$('.page-about-us .manager:nth-child(5n+3)').addClass('green');
$('.page-about-us .manager:nth-child(5n+4)').addClass('orange');
$('.page-about-us .manager:nth-child(5n+5)').addClass('pink');

我认为这不是很接近，所以任何指针都会受到赞赏。

由于

Answer 1

这是怎么回事......

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

或者如果在'.page-about-us'中重复五次重复

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>

Answer 2

在您的选择器中，您正在寻找class='manager'元素内class='page-about-us'的元素{/ 1}}

你的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>

可以使用当前的jQuery选择器

$('.page-about-us .manager:nth-child(5n+1)').addClass('red');
$('.page-about-us .manager:nth-child(5n+2)').addClass('blue');
$('.page-about-us .manager:nth-child(5n+3)').addClass('green');
$('.page-about-us .manager:nth-child(5n+4)').addClass('orange');
$('.page-about-us .manager:nth-child(5n+5)').addClass('pink');

FIDDLE

如果要过滤.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>

然后你想要选择子divs

$('.page-about-us .manager > div:nth-child(5n+1)')

FIDDLE

Answer 3

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

<button id="add_divs">Add Divs</button>
<div class="div_container">
</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");
});

您可以运行代码并相应地检查JS Fiddle

JQuery - 向元素添加交错类

3 个答案: