jquery - 在每第三篇文章后添加 div

Question

我发现这篇文章符合我的要求: Append Span Tag, after every 3rd div Jquery http://jsfiddle.net/pxaS4/2/

但我使用的是三列布局。我想清除:在每三个帖子之后，如果它们的高度不同，它们将始终保持连续 3 个。

html:

<div class="post-listing">

    <div class="post-item">
    This text make the post-item different height.
    </div>

    <div class="post-item">
    This text make the post-item different height. This text make the post-item different height.
    </div>

    <div class="post-item">
    This text make the post-item different height. 
    </div>

    <div class="post-item">
    This text make the post-item different height. This text make the post-item different height. This text make the post-item different height.
    </div>

    <div class="post-item">
    This text make the post-item different height.
    </div>

    <div class="post-item">
    This text make the post-item different height. This text make the post-item different height.
    </div>

    <div class="post-item">
    This text make the post-item different height. This text make the post-item different height. This text make the post-item different height.
    </div>

    <div class="post-item">
    This text make the post-item different height.
    </div>

    <div class="post-item">
    This text make the post-item different height.
    </div>

</div>

CSS:

.clear {
  clear: both;
  color: #000;
}

.post-listing {
  width: 300px;
}

.post-listing .post-item {
  float: left;
  color: red;
  background: #ccc;
  width: 32%;
  margin-right: 2%;
  margin-bottom: 30px;
}

.post-listing :nth-child(3n+0).post-item {
  margin-right: 0%;
  clear: right;
}

这似乎工作正常。问题是当我尝试在每三个帖子之后添加一个带有 jquery 的 div 类“clear”时。这就是我所拥有的，但它不起作用:

$('div.post-listing > div.post-item:nth-child(3n)').after('<div class="clear">this is the clear class</div>');

jsfiddle(非工作)在这里:jsfiddle

非常感谢任何帮助。谢谢

Answer 1

您不需要添加新的 div。将 clear: left 添加到 3n+1 .post-item。

.post-item:nth-child(3n+1) {clear: left;}

https://jsfiddle.net/936qtbu5/1/