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

使用wrapAll()方法

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用$（＆＃39;（some-parent）＆＃39;）选择父元素并尝试$('parent').prepend("<div id='new'>")。如果您需要关闭它，请$('parent').append("</div>")。

Answer 3

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

＆＃13;

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

＆＃13;

.new {
   padding: 10px;
   background: yellow;
}

[class^="box-"] {
   padding: 5px;
}


[class^="box-"]:nth-child(odd) {
   background: #000;
   color: #fff;
}

＆＃13;

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

＆＃13;

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

Jquery包装元素与开放和关闭标记

4 个答案: