Question

我想创建一个新的div（行），其中包含每次4 <a>（包括<a>}子项的标记，并在第一个<a>标记之前开始。 以下是它现在的样子：

<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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: