向带有插入标题元素的偶数元素添加边距 0

Question

我希望在 .item div 的偶数元素上设置 margin-right:0。但是，在某些地方插入了 header，这意味着 header 之后的第一个 .item 元素需要重置交替。这都是动态的，所以我不能在这些部分添加包装 div。

我需要的例子

<h2>heading</h2>
<div class="item"></div>
<div class="item"></div> <!-- margin-right:0 -->
<div class="item"></div>
<div class="item"></div> <!-- margin-right:0 -->
<h2>Heading</h2>
<div class="item"></div>
<div class="item"></div><!-- margin-right:0 -->
<div class="item"></div>
<h2>Heading</h2>
<div class="item"></div>
<div class="item"></div><!-- margin-right:0 -->
<div class="item"></div>
<div class="item"></div><!-- margin-right:0 -->

我试过但没有考虑标题的方法：

CSS

.item:nth-child(2n) {
     margin-right:0;
}

JS:

$('.item:even').css('margin-right', '0');

Answer 1

只需在 nth-child 函数中使用 even 和 odd 关键字即可：

div.item:nth-child(even) {
     margin-right:0;
}

您可以查看这里了解更多详情：https://www.w3.org/Style/Examples/007/evenodd.en.html

Answer 2

.item:nth-child(odd) {
   margin-right:0 !important;
 }

检查此 fiddle：https://jsfiddle.net/5rbyj2ed/6/

Answer 3

因为它被标记为 [jquery]，您可以使用 .nextUntil 找到每个 h2 之间的所有 .items，然后将它们过滤到 odd/even.

在这种情况下，您需要使用 :odd 因为它们是从零开始的（所以第 1 行是偶数的第 0 行，第 2 行是第 1 行的奇数，等等）

$("h2").each(function() {
    // have to use :odd for "even" rows as zero-based
    $(this).nextUntil("h2").filter(":odd").addClass("even");
});

.wrapper { border: 1px solid #CCC; }
.item { height: 10px; margin-right:20px; border: 1px solid green; }
.item.even { margin-right: 0; background-color: lightgreen; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrapper'>
<h2>heading</h2>
<div class="item"></div>
<div class="item"></div> <!-- margin-right:0 -->
<div class="item"></div>
<div class="item"></div> <!-- margin-right:0 -->
<div class="item"></div>
<h2>Heading</h2>
<div class="item"></div>
<div class="item"></div><!-- margin-right:0 -->
<div class="item"></div>
<h2>Heading</h2>
<div class="item"></div>
<div class="item"></div><!-- margin-right:0 -->
<div class="item"></div>
<div class="item"></div><!-- margin-right:0 -->
</div>

向带有插入标题元素的偶数元素添加边距 0

Adding margin 0 to even elements with inserted heading elements

css

grid

jquery

margin