How do I move an element from one place to another using jQuery?

I have an autogenerated HTML code which looks like this and it repeats for each product thumbnail on the page:

<div class="product-thumb product-inner">					 
    <div class="box">
    
    	<a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter"><img class="img-responsive shadow-bg" title="Acqua Alcalina Ionizzata sistema Hydro Filter" alt="Acqua Alcalina Ionizzata sistema Hydro Filter" src="http://www.missionfamily.org/image/cache/catalog/partner_fornitori/45_Hydro Filter/InoxAlka-280x280.jpg"></a>

        <span class="caption scale-caption product-quickview">
    
            <a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter"><span class="shotlinks1"></span></a>
        
            <div class="price">
                <span class="price-new">   da  €200,00 /kg</span>
            
               <span class="pay_price"><i class="mfcustom-icon-twopay"></i>   da  €193,00 /kg </span>
                
            </div>	
        
            <div class="rating">
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
            </div>    
        
            <a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter"> <i data-original-title="Visualizza scheda" data-toggle="tooltip" class="fa fa-external-link"></i> </a>
            <a href="index.php?route=themecontrol/product&amp;product_id=217" class="quickview"> <i data-original-title="Visualizzazione rapida" data-toggle="tooltip" class="fa fa-search-plus"></i> </a>
        
            <div class="compare-list">
                <a onclick="add_quote('217');"><i class="fa fa-envelope"></i></a>
                <a data-original-title="Lista dei desideri" data-toggle="tooltip" onclick="wishlist.add('217');"><i class="fa fa-heart"></i></a>
                <a data-original-title="Condividi con social network" data-toggle="tooltip"><i class="fa fa-share-alt"></i></a>
                <a data-original-title="Confronta prodotti" data-toggle="tooltip" onclick="compare.add('217');"><i class="fa fa-random"></i></a>
            </div>						
    
        </span>

    </div>

    <div class="main_badge">
	</div>
						 
    <div style="position:absolute; right:0px;" class="dynamic_badges2">
	</div>
					
    <div class="caption">
    
    
        <div class="name">
        	<h2>
            	<a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter">Acqua Alcalina Ionizzata sistema Hydro Filter</a>
			</h2>
		</div>
		<span>
        	<a href="http://www.missionfamily.org/prodotti-acqua">Acqua</a>
    	</span>
    	<span>						 
        	<a href="http://www.missionfamily.org/prodotti-acqua-sistemi-per-acqua">Sistemi per l'acqua</a>
    	</span>
    
    	<span class="span_vendorn">
        	<a href="index.php?route=product/vendorstore&amp;vendor_id=45">Hydro Filter</a> 
		</span> 
        
    </div> 
    
</div>

Open in new window




What I need to do is remove that div.price from where it is and insert it after the div.name.

How do I achieve this?

I tried this as follows but it doesn't work:
$( "div.price" ).each(function( index ) {
		  $(this).closest(".product-thumb").find(".caption").insertAfter( ".name" );
		});

Open in new window



thanks
badwolfffAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
$('div.price').closest().insertAfter('div.name');  


http://jsbin.com/ledepalowu/edit?html,output
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script>
    $(function(){

     $('div.price').closest().insertAfter('div.name'); 
    
   });
  </script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="product-thumb product-inner">					 
    <div class="box">
    
    	<a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter"><img class="img-responsive shadow-bg" title="Acqua Alcalina Ionizzata sistema Hydro Filter" alt="Acqua Alcalina Ionizzata sistema Hydro Filter" src="http://www.missionfamily.org/image/cache/catalog/partner_fornitori/45_Hydro Filter/InoxAlka-280x280.jpg"></a>

        <span class="caption scale-caption product-quickview">
    
            <a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter"><span class="shotlinks1"></span></a>
        
            <div class="price">
                <span class="price-new">   da  €111,00 /kg</span>
            
               <span class="pay_price"><i class="mfcustom-icon-twopay"></i>   da  €1111,00 /kg </span>
                
            </div>	
        
            <div class="rating">
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
            </div>    
        
            <a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter"> <i data-original-title="Visualizza scheda" data-toggle="tooltip" class="fa fa-external-link"></i> </a>
            <a href="index.php?route=themecontrol/product&amp;product_id=217" class="quickview"> <i data-original-title="Visualizzazione rapida" data-toggle="tooltip" class="fa fa-search-plus"></i> </a>
        
            <div class="compare-list">
                <a onclick="add_quote('217');"><i class="fa fa-envelope"></i></a>
                <a data-original-title="Lista dei desideri" data-toggle="tooltip" onclick="wishlist.add('217');"><i class="fa fa-heart"></i></a>
                <a data-original-title="Condividi con social network" data-toggle="tooltip"><i class="fa fa-share-alt"></i></a>
                <a data-original-title="Confronta prodotti" data-toggle="tooltip" onclick="compare.add('217');"><i class="fa fa-random"></i></a>
            </div>						
    
        </span>

    </div>

    <div class="main_badge">
	</div>
						 
    <div style="position:absolute; right:0px;" class="dynamic_badges2">
	</div>
					
    <div class="caption">
    
    
        <div class="name">
        	<h2>
            	<a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter">Acqua Alcalina Ionizzata sistema Hydro Filter</a>
			</h2>
		</div>
		<span>
        	<a href="http://www.missionfamily.org/prodotti-acqua">Acqua</a>
    	</span>
    	<span>						 
        	<a href="http://www.missionfamily.org/prodotti-acqua-sistemi-per-acqua">Sistemi per l'acqua</a>
    	</span>
    
    	<span class="span_vendorn">
        	<a href="index.php?route=product/vendorstore&amp;vendor_id=45">Hydro Filter</a> 
		</span> 
        
    </div> 
    
</div>
  <hr>
<div class="product-thumb product-inner">					 
    <div class="box">
    
    	<a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter"><img class="img-responsive shadow-bg" title="Acqua Alcalina Ionizzata sistema Hydro Filter" alt="Acqua Alcalina Ionizzata sistema Hydro Filter" src="http://www.missionfamily.org/image/cache/catalog/partner_fornitori/45_Hydro Filter/InoxAlka-280x280.jpg"></a>

        <span class="caption scale-caption product-quickview">
    
            <a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter"><span class="shotlinks1"></span></a>
        
            <div class="price">
                <span class="price-new">   da  €200,00 /kg</span>
            
               <span class="pay_price"><i class="mfcustom-icon-twopay"></i>   da  €193,00 /kg </span>
                
            </div>	
        
            <div class="rating">
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
            </div>    
        
            <a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter"> <i data-original-title="Visualizza scheda" data-toggle="tooltip" class="fa fa-external-link"></i> </a>
            <a href="index.php?route=themecontrol/product&amp;product_id=217" class="quickview"> <i data-original-title="Visualizzazione rapida" data-toggle="tooltip" class="fa fa-search-plus"></i> </a>
        
            <div class="compare-list">
                <a onclick="add_quote('217');"><i class="fa fa-envelope"></i></a>
                <a data-original-title="Lista dei desideri" data-toggle="tooltip" onclick="wishlist.add('217');"><i class="fa fa-heart"></i></a>
                <a data-original-title="Condividi con social network" data-toggle="tooltip"><i class="fa fa-share-alt"></i></a>
                <a data-original-title="Confronta prodotti" data-toggle="tooltip" onclick="compare.add('217');"><i class="fa fa-random"></i></a>
            </div>						
    
        </span>

    </div>

    <div class="main_badge">
	</div>
						 
    <div style="position:absolute; right:0px;" class="dynamic_badges2">
	</div>
					
    <div class="caption">
    
    
        <div class="name">
        	<h2>
            	<a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter">Acqua Alcalina Ionizzata sistema Hydro Filter</a>
			</h2>
		</div>
		<span>
        	<a href="http://www.missionfamily.org/prodotti-acqua">Acqua</a>
    	</span>
    	<span>						 
        	<a href="http://www.missionfamily.org/prodotti-acqua-sistemi-per-acqua">Sistemi per l'acqua</a>
    	</span>
    
    	<span class="span_vendorn">
        	<a href="index.php?route=product/vendorstore&amp;vendor_id=45">Hydro Filter</a> 
		</span> 
        
    </div> 
   <hr>
  <div class="product-thumb product-inner">					 
    <div class="box">
    
    	<a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter"><img class="img-responsive shadow-bg" title="Acqua Alcalina Ionizzata sistema Hydro Filter" alt="Acqua Alcalina Ionizzata sistema Hydro Filter" src="http://www.missionfamily.org/image/cache/catalog/partner_fornitori/45_Hydro Filter/InoxAlka-280x280.jpg"></a>

        <span class="caption scale-caption product-quickview">
    
            <a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter"><span class="shotlinks1"></span></a>
        
            <div class="price">
                <span class="price-new">   da  €3333,00 /kg</span>
            
               <span class="pay_price"><i class="mfcustom-icon-twopay"></i>   da  €3333,00 /kg </span>
                
            </div>	
        
            <div class="rating">
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
            </div>    
        
            <a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter"> <i data-original-title="Visualizza scheda" data-toggle="tooltip" class="fa fa-external-link"></i> </a>
            <a href="index.php?route=themecontrol/product&amp;product_id=217" class="quickview"> <i data-original-title="Visualizzazione rapida" data-toggle="tooltip" class="fa fa-search-plus"></i> </a>
        
            <div class="compare-list">
                <a onclick="add_quote('217');"><i class="fa fa-envelope"></i></a>
                <a data-original-title="Lista dei desideri" data-toggle="tooltip" onclick="wishlist.add('217');"><i class="fa fa-heart"></i></a>
                <a data-original-title="Condividi con social network" data-toggle="tooltip"><i class="fa fa-share-alt"></i></a>
                <a data-original-title="Confronta prodotti" data-toggle="tooltip" onclick="compare.add('217');"><i class="fa fa-random"></i></a>
            </div>						
    
        </span>

    </div>

    <div class="main_badge">
	</div>
						 
    <div style="position:absolute; right:0px;" class="dynamic_badges2">
	</div>
					
    <div class="caption">
    
    
        <div class="name">
        	<h2>
            	<a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter">Acqua Alcalina Ionizzata sistema Hydro Filter</a>
			</h2>
		</div>
		<span>
        	<a href="http://www.missionfamily.org/prodotti-acqua">Acqua</a>
    	</span>
    	<span>						 
        	<a href="http://www.missionfamily.org/prodotti-acqua-sistemi-per-acqua">Sistemi per l'acqua</a>
    	</span>
    
    	<span class="span_vendorn">
        	<a href="index.php?route=product/vendorstore&amp;vendor_id=45">Hydro Filter</a> 
		</span> 
        
    </div> 
    
</div>
</div>
</body>
</html>

Open in new window

0
badwolfffAuthor Commented:
It doesn't work, neither on my site nor in your example. :(
Could you please fix?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Give this one a try.  Note, that your html does not validate and could cause errors when using js/jquery.  

$(function(){
   $('.product-thumb').each(function(){
      var price = $(this).find('.price').html();       
     $(this).find('.price').hide();
      $(this,' .name').after(price);
    
   });
});

Open in new window

http://jsbin.com/nelunatogi/edit?html,js,output
<div class="product-thumb product-inner">					 
    <div class="box">
    
    	<a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter"><img class="img-responsive shadow-bg" title="Acqua Alcalina Ionizzata sistema Hydro Filter" alt="Acqua Alcalina Ionizzata sistema Hydro Filter" src="http://www.missionfamily.org/image/cache/catalog/partner_fornitori/45_Hydro Filter/InoxAlka-280x280.jpg"></a>

        <span class="caption scale-caption product-quickview">
    
            <a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter"><span class="shotlinks1"></span></a>
        
            <div class="price">
                <span class="price-new">   da  €111,00 /kg</span>
            
               <span class="pay_price"><i class="mfcustom-icon-twopay"></i>   da  €111,00 /kg </span>
                
            </div>	
        
            <div class="rating">
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
            </div>    
        
            <a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter"> <i data-original-title="Visualizza scheda" data-toggle="tooltip" class="fa fa-external-link"></i> </a>
            <a href="index.php?route=themecontrol/product&amp;product_id=217" class="quickview"> <i data-original-title="Visualizzazione rapida" data-toggle="tooltip" class="fa fa-search-plus"></i> </a>
        
            <div class="compare-list">
                <a onclick="add_quote('217');"><i class="fa fa-envelope"></i></a>
                <a data-original-title="Lista dei desideri" data-toggle="tooltip" onclick="wishlist.add('217');"><i class="fa fa-heart"></i></a>
                <a data-original-title="Condividi con social network" data-toggle="tooltip"><i class="fa fa-share-alt"></i></a>
                <a data-original-title="Confronta prodotti" data-toggle="tooltip" onclick="compare.add('217');"><i class="fa fa-random"></i></a>
            </div>						
    
        </span>

    </div>

    <div class="main_badge">
	</div>
						 
    <div style="position:absolute; right:0px;" class="dynamic_badges2">
	</div>
					
    <div class="caption">
    
    
        <div class="name">
        	<h2>
            	<a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter">Acqua Alcalina Ionizzata sistema Hydro Filter</a>
			</h2>
		</div>
		<span>
        	<a href="http://www.missionfamily.org/prodotti-acqua">Acqua</a>
    	</span>
    	<span>						 
        	<a href="http://www.missionfamily.org/prodotti-acqua-sistemi-per-acqua">Sistemi per l'acqua</a>
    	</span>
    
    	<span class="span_vendorn">
        	<a href="index.php?route=product/vendorstore&amp;vendor_id=45">Hydro Filter</a> 
		</span> 
        
    </div> 
    
</div>
  
  
  
  <div class="product-thumb product-inner">					 
    <div class="box">
    
    	<a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter"><img class="img-responsive shadow-bg" title="Acqua Alcalina Ionizzata sistema Hydro Filter" alt="Acqua Alcalina Ionizzata sistema Hydro Filter" src="http://www.missionfamily.org/image/cache/catalog/partner_fornitori/45_Hydro Filter/InoxAlka-280x280.jpg"></a>

        <span class="caption scale-caption product-quickview">
    
            <a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter"><span class="shotlinks1"></span></a>
        
            <div class="price">
                <span class="price-new">   da  €222,00 /kg</span>
            
               <span class="pay_price"><i class="mfcustom-icon-twopay"></i>   da  €222,00 /kg </span>
                
            </div>	
        
            <div class="rating">
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
            </div>    
        
            <a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter"> <i data-original-title="Visualizza scheda" data-toggle="tooltip" class="fa fa-external-link"></i> </a>
            <a href="index.php?route=themecontrol/product&amp;product_id=217" class="quickview"> <i data-original-title="Visualizzazione rapida" data-toggle="tooltip" class="fa fa-search-plus"></i> </a>
        
            <div class="compare-list">
                <a onclick="add_quote('217');"><i class="fa fa-envelope"></i></a>
                <a data-original-title="Lista dei desideri" data-toggle="tooltip" onclick="wishlist.add('217');"><i class="fa fa-heart"></i></a>
                <a data-original-title="Condividi con social network" data-toggle="tooltip"><i class="fa fa-share-alt"></i></a>
                <a data-original-title="Confronta prodotti" data-toggle="tooltip" onclick="compare.add('217');"><i class="fa fa-random"></i></a>
            </div>						
    
        </span>

    </div>

    <div class="main_badge">
	</div>
						 
    <div style="position:absolute; right:0px;" class="dynamic_badges2">
	</div>
					
    <div class="caption">
    
    
        <div class="name">
        	<h2>
            	<a href="http://www.missionfamily.org/acqua-alcalina-lonizzata-sistema-hydro-filter">Acqua Alcalina Ionizzata sistema Hydro Filter</a>
			</h2>
		</div>
		<span>
        	<a href="http://www.missionfamily.org/prodotti-acqua">Acqua</a>
    	</span>
    	<span>						 
        	<a href="http://www.missionfamily.org/prodotti-acqua-sistemi-per-acqua">Sistemi per l'acqua</a>
    	</span>
    
    	<span class="span_vendorn">
        	<a href="index.php?route=product/vendorstore&amp;vendor_id=45">Hydro Filter</a> 
		</span> 
        
    </div> 
    
</div>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

badwolfffAuthor Commented:
could we get the whose price div rather than just it's contents?
thanks
0
Julian HansenCommented:
You ca do it with this jQuery snippet - working sample here
<script>
$(function() {
  $('.product-thumb .price').each(function() {
    var name = $(this).closest('.product-thumb').find('.name');
    name.after($(this).detach());
  });
});
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
badwolfffAuthor Commented:
I am pretty annoyed Julian! Is there anything you DON'T know how to do in jQuery? :P
0
Julian HansenCommented:
:) ... Lots I am afraid
0
badwolfffAuthor Commented:
You've been my lifesaver far too many times!
I need to improve my jquery skills!
0
Julian HansenCommented:
You are most welcome and just keep going it is all about practice :)
0
badwolfffAuthor Commented:
Well I do try :D
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.