Question

我有例如8 DIV（包含图像）在一行中。我的问题是我希望能够在X之后得到一个新行（这个数字在滑块中设置）DIV。在这8个DIV的情况下，我想在例如之后添加新行。 4 DIV's。

我的DIV看起来像：

<div id="table-cell-x" class="table-cells"><img src="...."></div>

其中x = 1 - ＆gt; 8

我想要的结果是（如果是8个DIV并且X设置为4）：

<div class="table-rows">
    <div id="table-cell-1" class="table-cells">div1</div>
    <div id="table-cell-2" class="table-cells">div2</div>
    <div id="table-cell-3" class="table-cells">div3</div>
    <div id="table-cell-4" class="table-cells">div4</div>
</div>

<div class="table-rows">
    <div id="table-cell-5" class="table-cells">div5</div>
    <div id="table-cell-6" class="table-cells">div6</div>
    <div id="table-cell-7" class="table-cells">div7</div>
    <div id="table-cell-8" class="table-cells">div8</div>
</div>

我尝试过：

$('div.table-cells':lt(4)).append( '<div class="table-row"></div>' );
$('div.table-cells':gt(4)).append( '<div class="table-row"></div>' );

但那不起作用........请你帮我解决这个问题....

此致约翰

Answer 1

我明白你希望每个4 div.table-cells都包含在容器table-row div中。

如果是，请执行以下操作： -

$(document).ready(function(){
  var $child_div = $("div.table-cells");
  for (var i = 0; i < $child_div.length; i += 4) {
      var $parent_div = $("<div/>", {
          class: 'table-row'
      });
      $child_div.slice(i, i +4).wrapAll($parent_div);
  }
});

.table-row{
 background:grey;
 margin-bottom:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table-cell-1" class="table-cells">div1</div>
<div id="table-cell-2" class="table-cells">div2</div>
<div id="table-cell-3" class="table-cells">div3</div>
<div id="table-cell-4" class="table-cells">div4</div>
<div id="table-cell-5" class="table-cells">div5</div>
<div id="table-cell-6" class="table-cells">div6</div>
<div id="table-cell-7" class="table-cells">div7</div>
<div id="table-cell-8" class="table-cells">div8</div>

参考： -

.wrapAll() | jQuery API Documentation

如何选择第一个X DIV

1 个答案: