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、before、after 和更多方法，但都没有奏效。

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

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

我所需要的只是在之前添加 OPEN div 的方法：

<div id="new">

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

</div>

Answer 1

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

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

使用.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 3

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

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