Jquery用打开和关闭标记包装一组元素。

Question

我有一组不同的元素，例如：

<section class="box-1"></section>
<section class="box-2"></section>
<section class="box-3"></section>

我想用div +类包装所有这3个元素，如下所示：

<div id="new">
<section class="box-1"></section>
<section class="box-2"></section>
<section class="box-3"></section>
</div>

我尝试了wrap、wrapAll、before、after和更多的jQuery方法，但都没有奏效。

所有这些方法都添加了<div id="new">，但是立即关闭div，如下所示：

<div id="new"></div>
<section class="box-1"></section>
<section class="box-2"></section>
<section class="box-3"></section>
</div>

我所需要的只是在前面添加一个打开的div的方法：

<div id="new">

并在最后一个元素之后关闭div：

</div>

Answer 1

使用.wrapAll()包装div。您使用什么来标识要包装的div将取决于页面上的其他内容。如果它们是页面上唯一的部分，那么$( "section" ).wrapAll( "<div class='new' />");将实现您想要的结果。如果不是，那么向部分添加一个公共类，并使用它来标识div，$( ".sel" ).wrapAll( "<div class='new2' />");。

​

$('#button').click(function() {
    $( "section" ).wrapAll( "<div class='new' />");
});


$('#button2').click(function() {
    $( ".sel" ).wrapAll( "<div class='new2' />");
});

.new {
  border: 1px solid red;
  padding: 10px;
}

.new2 {
  border: 1px solid orange;
  padding: 10px;
}

.box {
  background-color: yellow;
  margin: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="sel box-1">box 1</section>
<section class="sel box-2">box 2</section>
<section class="sel box-3">box 3</section>


<input type="button" id="button" value="Click Me" />

<input type="button" id="button2" value="Click Me" />

​

Answer 2

使用wrapAll()方法

​

$('.box-1,.box-2,.box-3').wrapAll('<div/>')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="box-1"></section>
<section class="box-2"></section>
<section class="box-3"></section>

​

Answer 3

使用$(‘(一些父元素)“)选择父元素，然后尝试$('parent').prepend("<div id='new'>")。如果您需要关闭它，那么$('parent').append("</div>")。