【问题标题】:How to change the position of multiple instances of selected elements如何更改选定元素的多个实例的位置
【发布时间】:2012-01-12 12:36:27
【问题描述】:

我需要将每个 h3 元素从下面的位置移动到新位置作为 .summary-inside-wrapper 的第一个子元素

我所做的一切都将所有 h3 元素的一个实例移动到每个摘要中。我只需要移动每个摘要中的原始内容。

<div class="content-main">
   <div class="summary" id="listing_summary_3547">
      <div class="share"></div>
      <div class="summary-inside-wrapper">
         <div class="summary-inside">                <---- TO HERE ---| 
            <div class="left">                                        |
               <div class="title">                                    | 
                  <h3>unique text here 1</h3>      -- MOVE THIS h3 ---|      
                  <p>some other text here</p>
               </div>
            </div>
            <div class="right"></div>
         </div>
      </div>
   </div>
   <div class="summary" id="listing_summary_45741">
      <div class="share"></div>
      <div class="summary-inside-wrapper">
         <div class="summary-inside">                <---- TO HERE ---| 
            <div class="left">                                        |
               <div class="title">                                    | 
                  <h3>unique text here 1</h3>   --and MOVE THIS h3 ---|      
                  <p>some other text here</p>
               </div>
            </div>
            <div class="right"></div>
         </div>
      </div>
   </div>
   <div class="summary" id="listing_summary_6">
      <div class="share"></div>
      <div class="summary-inside-wrapper">
         <div class="summary-inside">                <---- TO HERE ---| 
            <div class="left">                                        |
               <div class="title">                                    | 
                  <h3>unique text here 1</h3>   --and MOVE THIS h3 ---|      
                  <p>some other text here</p>
               </div>
            </div>
            <div class="right"></div>
         </div>
      </div>
   </div>
</div>

我已经尝试过 insertBefore()、prepend() 等等,但没有得到想要的结果。每次我在摘要的每个实例中获得每个 h3 的副本。

【问题讨论】:

    标签: jquery dom dom-manipulation


    【解决方案1】:

    代码:

    $(".title h3").each(function()
                        {
                           var item=$(this); 
                           var parentContainer=item.parents(".summary-inside");
                           item.remove();
                           parentContainer.prepend(item);
                        });
    

    这是Live Demo

    【讨论】:

    • 快到了!它可以满足我的要求,但缺少 h3 标签。更清楚一点 - 来自 h3 标签的内容已被移动并且位于正确的位置(没有副本!是的!!!)但新位置中缺少 h3 标签,
    • 成功了!非常感谢!
    【解决方案2】:

    这应该可以解决问题

     $( ".summary-inside-wrapper" ).each(function() {
        $( this ).prepend( $( this ).find( ".title > h3" ).html() );
        $( this ).find( ".title" ).remove();
    });  
    

    【讨论】:

    • 您确定这会起作用并且它不会附加到使用“summary-inside”类找到的第一个控件,并且不一定是他想要的父控件吗?
    • 不起作用。它将第一个 h3 的内容放入每个实例中。
    • @Baz1nga 已更新,被误解了,出于某种原因我阅读了 .summary-inside"
    • @RickD 现在尝试将“unique text here 1”更改为“unique text here 1”、“unique text here 2”和“unique text here 3”,以便您看到更改
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-28
    • 1970-01-01
    相关资源
    最近更新 更多