Greetings Help solve the following problem: There is a form in which there is an n-count div.component , you need to make it so that if the parent div.component has div.component_option_thumbnail.selected , then we span.amount copy the span.amount to the end of h3 .
In fact, if .component_option_thumbnail has a class .selected , then in h3 copy span.amount .

 <form> <div class="component"> <div class="component-title"> <h3>Заголовок 1</h3> </div> <div class="component-inner"> <div class="component_option_thumbnail selected"> <span class="price"> <span class="amount">1000</span> </span> </div> </div> </div> <div class="component"> <div class="component-title"> <h3>Заголовок 2</h3> </div> <div class="component-inner"> <div class="component_option_thumbnail"> <span class="price"> <span class="amount">2000</span> </span> </div> </div> </div> <div class="component"> <div class="component-title"> <h3>Заголовок 3</h3> </div> <div class="component-inner"> <div class="component_option_thumbnail"> <span class="price"> <span class="amount">3000</span> </span> </div> </div> </div> </form>

Thank you in advance!

  • The essence of the task is not very clear. What h3 ? Inside it carry or close? And what's your problem? Please - Yuri

3 answers 3

If I correctly understood your description of the task, then like this:

 $(function() { $('form .component').each(function() { if($(this).find('.component_option_thumbnail').hasClass('selected')){ $(this).find('h3').append($(this).find('span.amount').clone()); }; }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <div class="component"> <div class="component-title"> <h3>Заголовок 1</h3> </div> <div class="component-inner"> <div class="component_option_thumbnail selected"> <span class="price"> <span class="amount">1000</span> </span> </div> </div> </div> <div class="component"> <div class="component-title"> <h3>Заголовок 2</h3> </div> <div class="component-inner"> <div class="component_option_thumbnail"> <span class="price"> <span class="amount">2000</span> </span> </div> </div> </div> <div class="component"> <div class="component-title"> <h3>Заголовок 3</h3> </div> <div class="component-inner"> <div class="component_option_thumbnail"> <span class="price"> <span class="amount">3000</span> </span> </div> </div> </div> </form> 

 $('.component').each( function( index, comp_node ){ const $amount = $( '.component_option_thumbnail.selected .amount', comp_node ); $( 'h3', comp_node ).append( $amount.text() ); } );

The $amount constant will contain a jquery wrapper over the node with the class .amount , which is contained in the current node ( comp_node ) and which has an ancestor with the classes .component_option_thumbnail and .selected at the same time. If there is no such node, then $amount will have an empty jquey object.

The text method for a non-empty jquery object will return a test contained in all nodes of the selection (concatenation of the texts of all nodes). For an empty object, an empty string will be returned, due to this there is no need to check the presence or absence of .content_option_thumbnail c .selected .

     $(".component").each(function(){ if($(this).find(".component_option_thumbnail").hasClass("selected")) { $(this).find("h3").append($(".component_option_thumbnail.selected").find(".amount").html()); } }) 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <div class="component"> <div class="component-title"> <h3>Заголовок 1</h3> </div> <div class="component-inner"> <div class="component_option_thumbnail selected"> <span class="price"> <span class="amount">1000</span> </span> </div> </div> </div> <div class="component"> <div class="component-title"> <h3>Заголовок 2</h3> </div> <div class="component-inner"> <div class="component_option_thumbnail"> <span class="price"> <span class="amount">2000</span> </span> </div> </div> </div> <div class="component"> <div class="component-title"> <h3>Заголовок 3</h3> </div> <div class="component-inner"> <div class="component_option_thumbnail"> <span class="price"> <span class="amount">3000</span> </span> </div> </div> </div> </form>