OR

Question

您好我有一个小问题，但不知道如何通过javascript / jquery解决它。基本上我有几个div类，但我想要做的是创建一个循环来在某些div上添加一个类，而不必手动添加一个id，而是通过javascript代码添加一个id或类。

了解我的意思：

<div></div><div></div>    
<div></div><div></div>
<div></div><div></div>    
<div></div><div></div>

这是我目前所拥有的，所以我们可以说两个div将是一行。我想要它，所以以某种方式添加一个类来使它像这样：

<div class="green"></div>           <div></div>    
<div></div>                         <div class="green"></div>
<div class="green"></div>           <div></div>    
<div></div>                         <div class="green"></div>

所以我猜这将是每2个div的某种循环然后它会反过来重复。

Answer 1

使用jquery

使用此循环在2 div后添加类

DEMO

 $('div').each(function(i){
   if((i%3) === 0){
    $(this).addClass('green')
   }
 });

使用:odd和:even选择器

DEMO

 $( "div:odd" ).addClass( "green" );

表示偶数

 $( "div:even" ).addClass( "green" );

Answer 2

基本上你想要 Zig-Zag 。

不需要循环。您可以使用:nth-child选择器，如下所示：

$('div:nth-child(4n+1)').addClass('green'); // Selects 1, 5, 9, 13, ...
$('div:nth-child(4n)').addClass('green'); // Selects 4, 8, 12, 16, ...

Demo

这是纯粹的 CSS 演示。

＆＃13;

body {
  width: 120px;
}
div {
  height: 50px;
  width: 50px;
  background: red;
  margin: 5px;
  float: left;
}
div:nth-child(4n+1) {
  background: green;
}
div:nth-child(4n) {
  background: green;
}

＆＃13;

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

＆＃13;

Answer 3

您可以使用childNodes（）javascript函数使用for循环获取div。如果索引是奇数，那么你可以手动申请你的班级。

类似的东西：

var nodes = parentElement.childNodes();

for (var i = 0; i < nodes.length; i++) {
    if (i % 2 == 0) continue;

    nodes[i].className = "green";
}

Answer 4

如果只是为了显示不同的背景，你可以使用css nth-child（偶数）或nth-child（odd），如表中的样本：

tr:nth-child(even) {background: #CCC} 
tr:nth-child(odd) {background: #FFF}

Answer 5

HTML：

<div class="wrapper">
    <div class="element">1</div>
    <div class="element">2</div>
    <div class="element">3</div>
    <div class="element">4</div>
    <div class="element">5</div>
    <div class="element">6</div>
</div>

纯Javascript：

var parents = document.getElementsByClassName("wrapper");

for (var i = 0, ii = parents.length; i < ii; i++) {
    var parent = parents[i],
        children = parent.children;

    for (var j = 0, jj = children.length; j < jj; j++) {
        var elem = children[j];
        if (j % 2 === 0) {
            elem.classList.add("highlight");
        }
    }
}

Demo

OR

<强> jQuery的：

$(".element:odd").addClass("highlight");

Demo

每2个类的Javascript循环

5 个答案:

OR