Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the position of multiple instances of selected elements

I need to move the each of the h3 elements from their position below to a new position as first child of .summary-inside-wrapper

Everything I have tried moves an instance of ALL the h3 elements into each summary. I need for only the original within each summary to be moved.

<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>

I have tried insertBefore(), prepend() and many more without the desired results. Each time I get copies of EVERY h3 inside each instance of the summary.

like image 532
Rick D Avatar asked Nov 17 '25 05:11

Rick D


1 Answers

Code:

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

here is a Live Demo

like image 121
Baz1nga Avatar answered Nov 19 '25 20:11

Baz1nga