jquery - 如何选择第一个 X DIV

Question

我有例如一行 8 个 DIV(包含图像)。我的问题是我希望能够在 X(这个数字在 slider 中设置)DIV 之后获得一个新行。对于这 8 个 DIV，我想在例如之后添加一个新行4 个 DIV。

我的 DIV 看起来像:

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

其中 x = 1 --> 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