javascript - Jquery 使用打开和关闭标记包装元素集

Question

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

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

我想用 div + class 包装所有这 3 个元素，所以它看起来像这样：

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

我尝试了jQuery中的 、 、wrap和wrapAll更多方法，但没有一个奏效。beforeafter

所有这些方法 add <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在之前添加 OPEN 的方法：

<div id="new">

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

</div>

Answer 1

使用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 2

使用 $('(some-parent)') 选择父元素并尝试$('parent').prepend("<div id='new'>"). 如果您需要关闭它，那么$('parent').append("</div>").

Answer 3

试试这个演示（使用附加）

$('body').append(
    $('<div>', {
        class: 'new'
    }).append(
        $.each($('section[class^="box-"]'), function(ndx, elem) {
            return elem;
        })
    )
);

.new {
   padding: 10px;
   background: yellow;
}

[class^="box-"] {
   padding: 5px;
}


[class^="box-"]:nth-child(odd) {
   background: #000;
   color: #fff;
}

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

Answer 4

用于.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" />