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;
}

这似乎工作正常。问题是当我尝试添加一个div类＆＃34;清除＆＃34;每三个帖子后用jquery。这就是我所拥有的，它不起作用：

$('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/

Answer 2

首先，你的jQuery不工作的原因是jQuery没有被你的小提琴加载。如果你加载最新的jQuery框架，你的jQuery代码工作正常。

其次，你想要做的只是用CSS完成。

您可以定位每个第3项并删除其边距，如下所示：

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

您也可以清除每个新行的第一项：

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

由于每行有三个项目，我们放3n。这意味着无论您拥有多少行，您始终都会定位正确数量的项目。 +1会在上一行的最后一项之后获取下一个 .post-listing项。

例如，假设您有两行，每行有3个项目。使用nth-child(3n+1)将选择第1和第4项。

n的第一次迭代是0。（3 * 0）+ 1 = 1

n的第二次迭代是1。（3 * 1）+ 1 = 4

以下是仅使用CSS更新小提琴的链接： https://jsfiddle.net/936qtbu5/4/

每三个帖子后添加div

2 个答案: