Question

我有DOM操作和jQuery的基本经验，但我试图弄清楚如何在现有容器中的第三个和最后一个div周围插入一个新的div容器。子div的数量会有所不同。我想我会使用nth-child选择器，但我还没有进一步发展。我会手动添加新容器，但是在页面加载时会生成子div。谢谢！

现有结构：

<div id="primary-cont">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

理想的结构：

<div id="primary-cont">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div id="secondary-cont">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Answer 1

如果您在页面上使用jQuery，那么nth-child是正确的方法，这就是我要做的：

$('#primary-count .child:nth-child(n+4)').wrapAll( "<div id='secondary-cont'></div>" );

这是如何运作的？

这将找到 #primary-count div，然后是.child里面的那个，然后它会在那里生成孩子，它只会做4个以上。

但是，根据你如何获取页面上的内容，这可能不是最好的方法，如果你在php循环中，最好使用该循环插入 div

例如，您可以使用以下内容：

$count = 1; foreach( $children as $child ) { if ($count%4 == 1) { echo "<div>"; } echo $kicks->brand; if ($count%4 == 0) { echo "</div>"; } $count++; } if ($count%4 != 1) echo "</div>";

Answer 2

我建立在Andy的答案之上，并使用.wrapAll()来实现我想要的结构：

$(document).ready(function() {
  $('#primary-cont .child:nth-child(n+4)').wrapAll('<div id="secondary-cont"></div>');
})

Answer 3

我们甚至可以使用slice() jQuery方法来执行此操作。

 $('#primary-cont div.child').slice(3,6).wrapAll("<div class='secondary-count'></div>");

用容器动态包装div的一部分

3 个答案: