javascript - jQuery 为每个 3 div 元素和每个 6 div 元素添加新的 div 元素

Question

首先我是新来的jQuery所以我的问题不相关，请原谅我。我有一些div我的 Dom 中的元素，我正在尝试为我的产品制作一个书架。我关注了this fiddle 效果非常好。但我的产品来自MySQL我用 foreach 解析它们循环输入PHP .

我的 HTML 看起来像:

<div class="product-yarn col-xs-4 col-md-2">
  <a href="#" class="book-shelf"></a>
</div> 
<div class="product-yarn col-xs-4 col-md-2">
  <a href="#" class="book-shelf"></a>
</div>
<div class="product-yarn col-xs-4 col-md-2">
  <a href="#" class="book-shelf"></a>
</div> 
<div class="product-yarn col-xs-4 col-md-2">
  <a href="#" class="book-shelf"></a>
</div> 
<div class="product-yarn col-xs-4 col-md-2">
  <a href="#" class="book-shelf"></a>
</div> 
<div class="product-yarn col-xs-4 col-md-2">
  <a href="#" class="book-shelf"></a>
</div> 

问题:我如何添加新的<div> each 之后的元素3 <div>喜欢；

<div class="col-xs-12 shelf hidden-md hidden-lg"></div>

并添加新的 <div> each 之后的元素6 <div>喜欢；

<div class="col-xs-12 shelf"></div>

很快所需的 HTML 输出；

<div class="product-yarn col-xs-4 col-md-2">
  <a href="#" class="book-shelf"></a>
</div> 
<div class="product-yarn col-xs-4 col-md-2">
  <a href="#" class="book-shelf"></a>
</div>
<div class="product-yarn col-xs-4 col-md-2">
  <a href="#" class="book-shelf"></a>
</div> 
<!-- Here Is The After 3rd div -->
<div class="col-xs-12 shelf hidden-md hidden-lg"></div>
<!-- Here Is The After 3rd div -->
<div class="product-yarn col-xs-4 col-md-2">
  <a href="#" class="book-shelf"></a>
</div> 
<div class="product-yarn col-xs-4 col-md-2">
  <a href="#" class="book-shelf"></a>
</div> 
<div class="product-yarn col-xs-4 col-md-2">
  <a href="#" class="book-shelf"></a>
</div> 
<!-- Here Is The After 6th div -->
<div class="col-xs-12 shelf"></div>
<!-- Here Is The After 6th div -->

我查看了SO中的一些问题其中一些关于 wrapping每 3 个元素都有新元素。但我想添加新元素。

那么，可以用 jQuery 来实现吗？

提前致谢。

PS:抱歉我的英语不好。

Answer 1

您需要使用 .after() 与 :nth-child() Selector 结合使用

.after()

Insert content, specified by the parameter, after each element in the set of matched elements.

:nth-child()

Selects all elements that are the nth-child of their parent.

脚本

$(document).ready(function () {
    $(".product-yarn:nth-child(3n)").after('<div class="col-xs-12 shelf hidden-md hidden-lg">after 3th div</div>');
    $(".shelf:odd").removeClass('hidden-md hidden-lg');
});

DEMO

$(document).ready(function() {
  $(".product-yarn:nth-child(3n)").after('<div class="col-xs-12 shelf hidden-md hidden-lg">after 3th div</div>');
  $(".shelf:odd").removeClass('hidden-md');
  $(".shelf:odd").removeClass('hidden-lg');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-4 col-md-2 product-yarn"> <a href="#" class="book-shelf">1</a>

</div>
<div class="col-xs-4 col-md-2 product-yarn"> <a href="#" class="book-shelf">2</a>

</div>
<div class="col-xs-4 col-md-2 product-yarn"> <a href="#" class="book-shelf">3</a>

</div>
<div class="col-xs-4 col-md-2 product-yarn"> <a href="#" class="book-shelf">4</a>

</div>
<div class="col-xs-4 col-md-2 product-yarn"> <a href="#" class="book-shelf">5</a>

</div>
<div class="col-xs-4 col-md-2 product-yarn"> <a href="#" class="book-shelf">6</a>

</div>
<div class="col-xs-4 col-md-2 product-yarn"> <a href="#" class="book-shelf">1</a>

</div>
<div class="col-xs-4 col-md-2 product-yarn"> <a href="#" class="book-shelf">2</a>

</div>
<div class="col-xs-4 col-md-2 product-yarn"> <a href="#" class="book-shelf">3</a>

</div>
<div class="col-xs-4 col-md-2 product-yarn"> <a href="#" class="book-shelf">4</a>

</div>
<div class="col-xs-4 col-md-2 product-yarn"> <a href="#" class="book-shelf">5</a>

</div>
<div class="col-xs-4 col-md-2 product-yarn"> <a href="#" class="book-shelf">6</a>
</div>