定位第3个子文章，然后在其中嵌套DIV

Question

我希望定位此列表中的每个第1和第3篇文章，然后调整位于文章选择器中的DIV的CSS。我怎样才能做到这一点？我在jQuery中的第n个孩子的东西不起作用 - 我也知道它在CSS中也可能 - 但jQuery解决方案对于更多浏览器来说更通用......？

<div class="blogFeed">
    <article>
        <div class="threeCols"></div>
    </article>
    <article>
        <div class="threeCols"></div>
    </article>
    <article>
        <div class="threeCols"></div>
    </article>
    <article>
        <div class="threeCols"></div>
    </article>
    <article>
        <div class="threeCols"></div>
    </article>
</div>

所以我想制作1st / 4th / 7th的CSS - 等1n + 3 margin-left:0px并制作3rd / 6th / 9th etc 1n+2 margin-right:0px的CSS

因此这些文章位于3个字符串中 - 所以每1/4/7等内部.threeCols div不需要LHS余量..并且每个3/6/9等内部.threeCols div不需要RHS保证金......

谢谢你们！

Answer 1

使用nth-child：

.blogFeed article:nth-child(3n) div {background: red;} /* 3, 6, 9th element */
.blogFeed article:nth-child(3n+1) div {background: green;} /* 1, 4, 7th element */

http://jsfiddle.net/Lvubwm4d/1/

Answer 2

我会强烈回应使用CSS的建议（:nth-child()选择器的兼容性非常好，除非你支持IE8（部分支持）和更低（不支持）） ：

/* the 'left' column: */
article:nth-child(3n + 1) div {
  background-color: blue;
}
/* the 'right' column: */
article:nth-child(3n) div {
  background-color: red;
}

article {
  display: inline-block;
  width: 30vw;
  height: 30vh;
  border: 2px solid #000;
  box-sizing: border-box;
}
article div::before {
  content: attr(class);
}

article:nth-child(3n + 1) div {
  background-color: blue;
}

article:nth-child(3n) div {
  background-color: red;
}

<div class="blogFeed">
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
</div>

但是，如果你必须使用jQuery：

// independently styling the 'left' and 'right' columns: */
$('article:nth-child(3n + 1) div').css({
  backgroundColor : 'blue'
});

$('article:nth-child(3n) div').css({
  backgroundColor : 'red'
});

$('article:nth-child(3n + 1) div').css({
  backgroundColor : 'blue'
});

$('article:nth-child(3n) div').css({
  backgroundColor : 'red'
});

article {
  display: inline-block;
  width: 30vw;
  height: 30vh;
  border: 2px solid #000;
  box-sizing: border-box;
}
article div::before {
  content: attr(class);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blogFeed">
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
</div>

或者：，因为根据类名（特别是删除/添加）更新元素的表示更容易，而不是使用css()（添加内联样式，style属性）使用addClass()：

更为明智

// selecting all <div> elements that are
// in an <article> element, and calling
// the addClass() method:
$('article div').addClass(function(i){
  // Note that CSS is 1-based, JavaScript is 0-based.

  // if the result of i + 1 divided by 3 is zero:
  if ( (i + 1) % 3 === 0) {
    // we return the 'rightColumn' class-name:
    return 'rightColumn';
    // if i is equal to 0 then it's the first-child,
    // or if i divided by 3 is zero then it must
    // be in the first 'column' of the 'row':
  } else if ( i === 0 || i % 3 === 0) {
    return 'leftColumn';
  }
});

$('article div').addClass(function(i){
  if ( (i + 1) % 3 === 0) {
    return 'rightColumn';
  } else if ( i === 0 || i % 3 === 0) {
    return 'leftColumn';
  }
});

article {
  display: inline-block;
  width: 30vw;
  height: 30vh;
  border: 2px solid #000;
  box-sizing: border-box;
}
article div::before {
  content: attr(class);
}
.leftColumn {
  background-color: yellow;
}
.rightColumn {
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blogFeed">
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
</div>

在纯JavaScript中，您可以使用：

// Converting the NodeList (from querySelectorAll()) into
// array, using Array.prototype.slice():
var articleDivs = Array.prototype.slice.call(document.querySelectorAll('article div'), 0);

// using Array.prototype.forEach() to iterate over
// that Array; within the function the first
// argument (here: 'div') is the array-element of
// the array over which we're iterating, the second
// argument (here: 'index') is the index of that element
// within the array:
articleDivs.forEach(function (div, index) {
  // the logic is exactly the same as above:
  if ( (index + 1) % 3 === 0) {
    // but we're using the Element.classList API
    // to add the relevant class-name(s):
    div.classList.add('rightColumn');
  } else if (index === 0 || index % 3 === 0) {
    div.classList.add('leftColumn');
  }
});

var articleDivs = Array.prototype.slice.call(document.querySelectorAll('article div'), 0);

articleDivs.forEach(function (div, index) {
  if ( (index + 1) % 3 === 0) {
    div.classList.add('rightColumn');
  } else if (index === 0 || index % 3 === 0) {
    div.classList.add('leftColumn');
  }
});

article {
  display: inline-block;
  width: 30vw;
  height: 30vh;
  border: 2px solid #000;
  box-sizing: border-box;
}
article div::before {
  content: attr(class);
}
.leftColumn {
  background-color: yellow;
}
.rightColumn {
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blogFeed">
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
  <article>
    <div class="threeCols"></div>
  </article>
</div>

参考文献：

• CSS：
  • :nth-child() selector ^{compatibility}
• JavaScript的：
  • Array.prototype.forEach()。
  • Array.prototype.slice()。
  • document.querySelectorAll()。
  • Element.classList API。
  • Function.prototype.call()。
• jQuery的：
  • addClass()。
  • css()。