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

Question

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

我的 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> 

问题：我如何在each 3 <div>like 之后添加新的<div> 元素；

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

并在each 6 <div>like 之后添加新的<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()

在匹配元素集中的每个元素之后插入由参数指定的内容。

:nth-child()

选择作为其父级的第 n 个子级的所有元素。

脚本

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

Answer 2

更新：- 您需要的 jquery 代码是

    $(document).ready(function () {
    $(".col-md-2").each(function (index, value) {
        if ((index + 1) % 3 == 0) {
            $(this).after('<div class="col-xs-12 shelf hidden-md hidden-lg">after 3rd div</div>');
        }
        if ((index + 1) % 6 == 0) {
            $(this).after('<div class="col-xs-12 shelf">after 6th div</div>');
        }
    });
});

您也可以在此处查看工作演示 - http://jsfiddle.net/esrab6dd/1/ （在链接中添加文本用于演示目的，您可以将其删除）

Answer 3

试试：

    $('div.col-xs-4').each(function (i, v) {
     var index = parseInt($(this).index());
     if ((i % 3 == 0) && (i % 6 != 0)) {
         $('<div class="col-xs-12 shelf hidden-md hidden-lg"></div>').insertBefore($(this));
     } else if (i / 6 != 0 && i % 6 == 0) {
         $('<div class="col-xs-12 shelf"></div>').insertBefore($(this));
     }

 });
 $('<div class="col-xs-12 shelf"></div>').insertAfter('div.col-xs-4:last');

http://www.bootply.com/GITjvbYqiq

Answer 4

试试这个：

$(document).ready(function(){

            total_elements = $(".col-xs-4.col-md-2").length;
            var append_div = '<div class="col-xs-12 shelf hidden-md hidden-lg">  </div>';

            for (var i=3; i<total_elements; i+3){
                    $(".col-xs-4.col-md-2").eq(i).append(append_div);
            }
        });