Question

首先我<pageGraphics> <rotate degrees="90"/> <image x="19cm" y="1cm" height="70.0" >[[ company.footer_img ]]</image> </pageGraphics>上的所有新内容，所以我的问题不相关请原谅我。我的Dom中有一些jQuery元素，我试图为我的产品制作书架。我跟着 this fiddle ，这很有效。但我的产品来自div，我正在使用MySQL中的foreach循环解析它们。

我的HTML看起来像：

PHP

问题：如何在<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> 3 <div>之后添加新的each元素;

<div>

在<div class="col-xs-12 shelf hidden-md hidden-lg"></div> 6 <div>之后添加新的each元素;

<div>

很快，所需的HTML输出;

<div class="col-xs-12 shelf"></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="col-xs-12 shelf hidden-md hidden-lg"></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="col-xs-12 shelf"></div> 中查看了一些问题，其中一些问题是关于SO每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

＆＃13;

$(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');
});

＆＃13;

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

＆＃13;

Answer 2

尝试：

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

更新： - 您需要的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 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);
            }
        });

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

4 个答案: