如何为 2 个子 div 添加包装 div（所有子 div 具有相同的类）答案

【问题标题】：How to add wrapper div for 2 child divs (all child divs having same class)如何为 2 个子 div 添加包装 div（所有子 div 具有相同的类）
【发布时间】：2017-06-27 08:17:06
【问题描述】：

我有一个 div 和四个具有相同类的子 div..都具有相同的类..我想要两个包装 2 个 div 在一个父 div 中..我不能通过 html 添加或添加任何类，因为它来自 drupal 模板..有什么方法可以为前两个和后两个 div 添加单独的包装器 div ..提前谢谢

$( ".myclass" ).wrapAll( "&lt;div class='row' /&gt;");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div class="row">
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
</div>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

据我了解，您想将前两个元素包装在另一个新行中吗？

应该这样做：

var elements = $( ".myclass" );

$([elements[0], elements[1]]).wrapAll( "<div class='row' />");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div class="row">
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
</div>

应该可以的。

【讨论】：

【解决方案2】：

你可以使用切片。

$('.myclass').slice(0,2).wrapAll( "<div class='row' />");
$('.myclass').slice(2,4).wrapAll( "<div class='row' />");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div class="row">
<div class="myclass">1</div>
<div class="myclass">2</div>
<div class="myclass">3</div>
<div class="myclass">4</div>
</div>

【讨论】：

很高兴为您提供帮助:)

【解决方案3】：

使用:lt()选择器

说明：选择匹配集中索引小于索引的所有元素。

这意味着选择索引小于 2 的所有元素，即索引分别为 0 和 1 的第一个和第二个元素

$(".myclass:lt(2)").wrapAll("&lt;div class='row' /&gt;");

.row {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>


  <div class="myclass">1</div>
  <div class="myclass">2</div>
  <div class="myclass">3</div>
  <div class="myclass">4</div>

【讨论】：

【解决方案4】：

或者，你可以使用这个：

$('.myclass:eq(0),.myclass:eq(1),').wrapAll('<div class="row1"></div>');
$('.myclass:eq(2),.myclass:eq(3),').wrapAll('<div class="row2"></div>');

在上面的示例中，我使用了:eq() 选择器来选择子 div。在这种方法中，索引从 0 开始（就像数组一样）。

【讨论】：