jquery - 针对第 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 的 CSS/第 9 等 1n+2 margin-right:0px

所以文章分为 3 列 - 所以每 1/4/7 等内部 .threeCols div 不需要 LHS margin..，每 3/6/9 等内部 。 threeCols div 不需要 RHS 边距...

谢谢大家!

Answer 1

使用第n个 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/