JQuery - 向元素添加交错类

总之我有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个孩子和一流的类型，但没有成功。

$('.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');

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

感谢

来源

2014-03-04 Bert Murphy

在你选择你正在寻找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>

would wor您当前的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

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

那么你将要选择的儿童div

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

FIDDLE

来源

2014-03-04 21:38:18

是的，那只是一个疏忽。我现在纠正了我的帖子。 –

@BertMurphy可以举一个例子来展示你的HTML结构吗？它看起来应该在你的上面的例子中工作..但是如果他们都没有相同的父母，那么它有点不同 –

@BertMurphy这一切都取决于你的结构以及你想如何div divs着色[颜色与它的关系父母]（http://jsfiddle.net/F2eFN/）或[颜色与其父母不相关]（http://jsfiddle.net/ke5b2/） –

如何回合这个...

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>

来源

2014-03-04 21:40:30 Ted

这似乎是一个非常漂亮的解决方案。谢谢。 –

哦，我看到你编辑了原来的帖子---我会编辑我的反映 – Ted

这是我创建的一个小例子。下面是引用的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

来源

2014-03-04 21:43:26

JQuery - 向元素添加交错类

回答

相关问题