将两个div包装在一个容器中

Question

我有一个包含多个div的容器，我需要用jQuery将其中两个div包装在另一个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>

- Green Wizard

Answer 1

你可以使用 wrapAll() 函数！它会将所有匹配选择器的元素进行包装! :) $('.b,.c').wrapAll('<div class="child"></div>'); JSFIDDLE DEMO

- skshoyeb

Answer 2

使用 wrapAll 方法 ：

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

点击查看演示

以上链接可查看相关演示。

- Bhojendra Rauniyar

Answer 3

请查看这个演示 Fiddle

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

使用JQuery的.wrapAll()方法 - 它将HTML结构包装在所有匹配的元素周围。

- Shaunak D

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函数来实现此功能 :-)

- Harini Sekar

Answer 5

以下是在包装元素后调用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>

- Bhavesh Bhuva

---

这个答案并不能特别解决OP想要的问题。它将匹配.form-container下的每个.form-label，而OP只想匹配几个div。 - Sandeep Phadke