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

【问题标题】：JQuery: Create a div as parent and add existing elements to itJQuery：创建一个 div 作为父级并向其添加现有元素
【发布时间】：2015-05-10 11:56:58
【问题描述】：

我想创建一个新的 div(row)，其中包含每次 4 个 <a>（包括 <a> 的子代）标签，并在第一个 <a>tag 之前开始。 现在是这样的：

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

});

【问题讨论】：

通常您会在 PHP 中执行此操作（或任何生成输出的服务器端语言），您可以在输出之前/期间执行此操作吗？ <?php echo ($counter%4) '</div><div class="row">':''; ?> - 使用 PHP mod 运算符和循环计数器每四行输出一个新行。
我已经添加了上面的代码。

标签： jquery append add parent children

【解决方案1】：

试试这个，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>

【讨论】：

非常感谢！这就是我需要的，我只需要调整它，因为我的标签中有一些属性，现在它可以正常工作了！

【解决方案2】：

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

这将组成一行，其中包含四个链接。

【讨论】：

【解决方案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>

【讨论】：