【问题标题】:How to wrap multiple instances of selected elements into new <div>'s如何将所选元素的多个实例包装到新的 <div> 中
【发布时间】:2012-01-12 08:39:34
【问题描述】:

我需要将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>')

但是结果是错误的,所有元素都放在一起,而不是按照我需要的方式分布。

【问题讨论】:

    标签: jquery dom dom-manipulation


    【解决方案1】:

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

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

    JS Fiddle demo.

    链接演示中显示您想要的 html 的文本是 .content-main 元素的更新 html,在使用 jQuery 1.3.2 操作后。

    【讨论】:

    • 很高兴能帮上忙! =)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-06-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-01-01
    相关资源
    最近更新 更多