Question

我有一个div与四个同一类的子div ...所有habving相同的类..我想在一个父div中的两个包2 div ..我不能通过HTML添加或添加任何类因为它来自drupal模板..有没有办法为前两个和最后两个div添加单独的包装div ..提前谢谢

＆＃13;

$( ".myclass" ).wrapAll( "<div class='row' />");

＆＃13;

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

＆＃13;

Answer 1

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

这应该这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

应该这样做。

Answer 2

使用:lt()选择器

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

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

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

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

Answer 3

您可以使用切片。

$('.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>

Answer 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开始（就像数组一样）。

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

4 个答案: