如何将所选元素的多个实例包装到新的<div>的</div>中

时间:2011-12-03 21:31:40

标签: jquery dom dom-manipulation

我需要将div与类.left.right包装成新的div。在我需要它的时候遇到问题。

这是原始标记:

<div class="content-main">
  <div class="summary" id="listing_summary_3547">
    <div class="share"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="summary" id="listing_summary_12739">
    <div class="share"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>        
  <div class="summary" id="listing_summary_4">
    <div class="share"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

这是我需要的结果:

<div class="content-main">
   <div class="summary" id="listing_summary_3547">
      <div class="share"></div>
      <div class="summary-inside">
         <div class="left"></div>
         <div class="right"></div>
      </div>
   </div>
   <div class="summary" id="listing_summary_12739">
      <div class="share"></div>
      <div class="summary-inside">
         <div class="left"></div>
         <div class="right"></div>
      </div>
   </div>
   <div class="summary" id="listing_summary_4">
      <div class="share"></div>
      <div class="summary-inside">
         <div class="left"></div>
         <div class="right"></div>
      </div>
   </div>
</div>

脚本标记需要驻留在标记内(无法访问部分)。 jQuery版本是1.3.2

我最接近的是:

    $('.summary .left,.summary .right').wrapAll('<div class="summary-inside"></div>')

然而结果是错误的,元素全部放在一起而不是按我需要的方式分发。

1 个答案:

答案 0 :(得分:5)

现在已经过测试,确实有效:

$('.content-main .summary').each(
    function(){
        $(this).find('.left,.right').wrapAll('<div class="summary-inside"></div>');
    });

JS Fiddle demo

在使用jQuery 1.3.2进行操作之后,链接演示中显示所需html的文本是.content-main元素的更新html。