JQuery：创建一个 div 作为父级并向其添加现有元素

Question

我想创建一个新的 div（行），其中每次包含 4 个 <a>（包括 <a> 的子项）标签并在第一个 [=15= 之前开始]标签。 这是现在的样子：

<div class="container" id="cont">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">My Page Header</h1>
        </div>
    </div>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
</div>

但它应该是这样的：

 <div class="container" id="cont">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">My Page Header</h1>
        </div>
    </div>
    <div class="row">
        <a>....</a>
        <a>....</a>
        <a>....</a>
        <a>....</a>
    </div>
    <div class="row">
        <a>....</a>
        <a>....</a>
        <a>....</a>
        <a>....</a>
   </div>
</div>

等等...<a> 标签没有任何 ID，它们只包含一些图像。

如何使用 JQuery 做到这一点？

请记住，我对 JQuery 完全没有经验！

到目前为止我的代码：

$("#cont").children("a").each(function(index) {
if (index % 4 == 0) {
    $('<div id="abc' + index + '">Test</div>').insertAfter(".row");
}

});

Answer 1

var $row = $("<div class='row'></div>");
for (var i = 0; i < 5; i++){
    $link = $("<a></a>");
    $row.append ($link);
}
$row.appendTo(".container");

这将生成一个包含四个链接的行。

Answer 2

试试这个，DEMO

  $(document).ready(function () {
        var mycontent = '';
        $("#cont").children("a").each(function (index) {
            var cc = $(this).html();
            if (index % 4 == 0) {
                mycontent += '</div><div id="abc' + index + '">';
                mycontent += "<a href=''>" + $(this).html() + "</a>";
            }
            else {
                mycontent += "<a href=''>" + $(this).html() + "</a>";
            }
        });
        $("#cont").find('a').remove();
        $("#cont:first .row").append(mycontent);
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container" id="cont">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">My Page Header</h1>
        </div>
    </div>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
</div>

Answer 3

更好的解决方案

  $(document).ready(function(){
        let aTag =  $(this).find('a');
        for(var i = 0; i < aTag.length; i+=4) {
            aTag.slice(i, i+4).wrapAll("<div class='row'></div>");
        }

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="cont">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">My Page Header</h1>
        </div>
    </div>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
    <a>....</a>
</div>

JQuery：创建一个 div 作为父级并向其添加现有元素

JQuery: Create a div as parent and add existing elements to it

jquery

children

append

add

parent