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>

我尝试了 wrap、wrapAll、before、after 以及 jQuery 中的更多方法，但 none 有效。

所有这些方法都添加 <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

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

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

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

$('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' />"); 将实现您想要的。如果不是，则向这些部分添加一个公共 class，并使用它来标识您的 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" />

Jquery 用开始和结束标签包裹一组元素

Jquery wrap set of elements with open and close tag

javascript

jquery

wrapall