.wrap() 和多元素选择器答案

【问题标题】：.wrap() and multiple element selectors.wrap() 和多元素选择器
【发布时间】：2010-01-29 10:39:28
【问题描述】：

包装多个元素的最佳方式是什么。我尝试了几种方法，但都没有成功。

这是标记：

<div>
   <h3>Civil aerospace </h3>
   <p>Powering more than 30 civil aircraft types from small executive jets to the lartest airliners.</p>
   <h4>£47.1bn</h4>
   <p>Order book</p>
   <h4>£4,481m</h4>
   <p>Revenue</p>
</div>

这是我最终需要的：

<div class="hub">
   <h3>Civil aerospace </h3>
   <p>Powering more than 30 civil aircraft types from small executive jets to the lartest airliners.</p>
    <div class="wrap">
     <h4>£47.1bn</h4>
     <p>Order book</p>
     </div>
    <div class="wrap">
     <h4>£4,481m</h4>
     <p>Revenue</p>
    </div>
</div>

尝试过添加、查找、过滤等

我需要设置迭代吗？

【问题讨论】：

第一个和最后一个marups是相同的（没有任何标记）。
感谢马克 B！抱歉忘记正确格式化。

标签： javascript jquery html

【解决方案1】：

抱歉，只好忍气吞声 :)

Scharrels 说得对，但这里也有一个适用于 jQuery 1.3.2 的可能解决方案：

$(function(){
    $('div').addClass('hub').find('h4').wrap('<div class="wrap"></div>');
    $('.wrap').each(function(){
        var div = $(this);
        div.append(div.next('p').remove());

        while(div.next('p').length != 0)
            div.append(div.next('p').remove());
    });
});

这有点繁琐，但它可以工作，而且它确实可以满足每个 <h4> 后面有多个 <p> 的标签。

【讨论】：

虽然这很可能不是问题，但请注意，在 jQuery 中删除 DOM 元素将删除与其关联的所有事件。如果您有绑定到<p> 元素或其任何子元素的事件处理程序，则必须再次绑定它。
抱歉，互联网在这里停了几个小时 :( 感谢 Scharrels 和 Mark B - 两种解决方案都运行良好。我要使用 Mark B，因为我需要运行 1.3.2 版本谢谢非常感谢您的帮助！

【解决方案2】：

您可以使用新的 nextUntil() 方法来执行此操作：

$(function(){
  $("h4").each(function(){
     $(this).add($(this).nextUntil("h4")).wrap("<div class='wrap' />");
  });
});

nextUntil 方法是 jQuery 1.4 中的新方法。

【讨论】：