Question

我有一个包含多个div的容器，我需要使用jquery将其中的两个包装在另一个div中。请建议可能的方式。

实际结构

<div class='parent'>
 <div class='a'>abcd</div>
 <div class='b'>abcd</div>
 <div class='c'>abcd</div>
 <div class='d'>abcd</div>
</div>

预期结构：

<div class='parent'>
 <div class='a'>abcd</div>
 <div class='child'>
  <div class='b'>abcd</div>
  <div class='c'>abcd</div>
 </div>
 <div class='d'>abcd</div>
</div>

Answer 1

您可以使用wrapAll()功能！它包装了与选择器匹配的所有元素！：）

$('.b,.c').wrapAll('<div class="child"></div>');

JSFIDDLE DEMO

Answer 2

使用wrapAll method：

$('.b, .c').wrapAll('<div class="child" />');

inspect this demo

Answer 3

选中 Demo Fiddle

$('.b,.c').wrapAll('<div class="child"></div>')

使用Jquery .wrapAll() - 它包含所有匹配元素周围的html结构。

Answer 4

.wrap(): Wrap an HTML structure around each element in the set of matched elements.
.wrapAll(): Wrap an HTML structure around all elements in the set of matched elements.

.wrap（）单独包装每个元素，但.wrapAll（）将所有元素作为一个组包装。

例如：

<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>

使用$（'。foo'）。wrap（''）;，会发生这种情况：

<div class="bar"><div class="foo"></div></div>
<div class="bar"><div class="foo"></div></div>
<div class="bar"><div class="foo"></div></div>

但是使用$（'。foo'）。wrapAll（''）;，会发生这种情况：

<div class="bar">
  <div class="foo"></div>
  <div class="foo"></div>
  <div class="foo"></div>
</div>

您可以使用WrapAll功能： - ）

Answer 5

下面是在 Wrap 元素之后调用 jQuery 的方法

<div class='form-container'>
    ...
    <div class='form-label'>Name (required)</div>
    <div class='form-field'><input type="text" name="you-name" value="" class="textbox" size="30" maxlength="200" /></div>

    <div class='form-label'>Email (required)</div>
    <div class='form-field'><input type="text" name="you-email" value="" class="textbox" size="30" maxlength="200" /></div>
    ...
</div>


<script type='text/javascript'>
    $(".form-container .form-label").each(function(index) {
        $(this).next(".form-field").andSelf().wrapAll("<div class='form-element-wrapper' />")
    });
</script>

在容器中包装两个div

5 个答案: