Как целевые клонированный элемент в DOM (JQuery)

Question

Вот моя разметка:

<div class="main"> 
    <div class="box"> 
     <div class="box_content"> 
      <div class="box_price">180</div> 
      <div class="box_button">Click me</div> 
     </div> 
    </div> 
    <div class="box"> 
     <div class="box_content"> 
      <div class="box_price">130</div> 
      <div class="box_button">Click me</div> 
     </div> 
    </div> 
    <div class="box"> 
     <div class="box_content"> 
      <div class="box_price">270</div> 
      <div class="box_button">Click me</div> 
     </div> 
    </div> 
</div> 

<div class="container"> 

</div> 

<div class="cost"></div> 

Так я клонирован и приложил некоторые .box див в JQuery из .main в .container, используя этот код:

$(document).ready(function(){ 
"use strict"; 
    $(".box_button").click(function(){ 

     var box_content = $(this).parents('.box').clone(); //Box is cloned 
     var price = $(box_content).find(".box_price"); 

     $(price).toggleClass('box_price sc_box_price'); //Class changed to sc_box_price 
     $(box_content).append('.container'); //Box is appended 
    }); 
}); 

Перед добавлением, я изменил класс ребенка элемента .box_price к .sc_box_price.

У меня есть еще один код, который должен рассчитать сумму всех .sc_box_price и добавить его в .cost.

$(document).ready(function(){ 
"use strict"; 

    var box_price = $(".sc_box_price"); 
    var total = 0; 

    $(box_price).each(function(){ 
     total += parseInt($(this).text()); 
    }); 
    $('.cost').prepend("<div class='cost'>"+total+"</div>"); 
    console.log(total); 
}); 

По какой-то причине я не могу установить цель .sc_box_price. Возможно, это потому, что .sc_box_price фактически не добавлен в DOM? Как это исправить?

Answer 1

Вместо append() вам необходимо использовать appendTo, чтобы добавить клонированную коробку.

Существует разница между appendTo и присоединять т.е.

take this new thing and appendTo an already existing thing 
vs 
take already existing thing and append this new thing 

Вот почему вам нужно использовать appendTo()

теперь после добавления добавить другой код в onClick event after appendTo statement Также вместо присоединяя Див каждый раз ваш может просто измените текст раздела cost. Полагаю, это то, чего вы хотите.

$(document).ready(function(){ 
 

 
    $(".box_button").click(function(){ 
 
     
 
     var box_content = $(this).parents('.box').clone(); //Box is cloned 
 
     var price = $(box_content).find(".box_price"); 
 

 
     $(price).toggleClass('box_price sc_box_price'); //Class changed to sc_box_price 
 
     
 
     $(box_content).appendTo('.container'); //Box is appended 
 
     
 
     var box_price = $(".sc_box_price"); 
 
      var total = 0; 
 

 
      $(box_price).each(function(){ 
 
       total += parseInt($(this).text()); 
 
      }); 
 
      
 
      $('.cost').text(total); 
 
      
 
      }); 
 
    
 
    
 
});

.cost { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <div class="box"> 
 
     <div class="box_content"> 
 
      <div class="box_price">180</div> 
 
      <div class="box_button">Click me</div> 
 
     </div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="box_content"> 
 
      <div class="box_price">130</div> 
 
      <div class="box_button">Click me</div> 
 
     </div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="box_content"> 
 
      <div class="box_price">270</div> 
 
      <div class="box_button">Click me</div> 
 
     </div> 
 
    </div> 
 
    
 
    
 
</div> 
 

 
<div class="container"> 
 

 
</div> 
 

 
<div class="cost"></div>

Answer 2

Ваш append вызов в обратном направлении. Попробуй это.

Обратите внимание, что добавленные элементы «Click me» не будут иметь связанных с ними событий click. Это ваше намерение?

Кроме того, я думаю, вы можете использовать звонок html по телефону $('.cost') вместо append.

$(document).ready(function(){ 
 
"use strict"; 
 

 
    $(".box_button").click(function(){ 
 

 
     var box_content = $(this).parents('.box').clone(); //Box is cloned 
 
     var price = $(box_content).find(".box_price"); 
 

 
     $(price).toggleClass('box_price sc_box_price'); //Class changed to sc_box_price 
 
     // $(box_content).append('.container'); //Box is appended 
 
     $('.container').append(box_content); //Box is appended 
 

 
     calculate_price(); 
 
    }); 
 
}); 
 

 
function calculate_price() { 
 
    var box_price = $(".sc_box_price"); 
 
    var total = 0; 
 

 
    $(box_price).each(function(){ 
 
     total += parseInt($(this).text()); 
 
    }); 
 
    $('.cost').html("<div class='cost'>"+total+"</div>"); // formerly: $('.cost').append 
 
    console.log(total); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <div class="box"> 
 
     <div class="box_content"> 
 
      <div class="box_price">180</div> 
 
      <div class="box_button">Click me</div> 
 
     </div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="box_content"> 
 
      <div class="box_price">130</div> 
 
      <div class="box_button">Click me</div> 
 
     </div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="box_content"> 
 
      <div class="box_price">270</div> 
 
      <div class="box_button">Click me</div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 

 
</div> 
 

 
<div class="cost"></div>

Answer 3

Есть много erros в вашем коде. В чем была идея? Что-то вроде этого:

$(document).ready(function(){ 
 
"use strict"; 
 
    $(".box_button").click(function(){ 
 

 
     var box_content = $(this).parents('.box').clone(); 
 
     var price = box_content.find(".box_price"); 
 

 
     price.toggleClass('box_price sc_box_price'); 
 
     
 
     $('.container').append(price); 
 
     //box_content.append('.container'); //Box is appended 
 
     
 
     var box_price = $(".sc_box_price"); 
 
     var total = 0; 
 

 
     box_price.each(function(){ 
 
     total += parseInt($(this).text()); 
 
     }); 
 
     
 
     $('.cost').html("Total:"+total); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <div class="box"> 
 
     <div class="box_content"> 
 
      <div class="box_price">180</div> 
 
      <div class="box_button">Add to Cart</div> 
 
     </div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="box_content"> 
 
      <div class="box_price">130</div> 
 
      <div class="box_button">Add to Cart</div> 
 
     </div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="box_content"> 
 
      <div class="box_price">270</div> 
 
      <div class="box_button">Add to Cart</div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    </br> 
 
    Cart: 
 
</div> 
 

 
<div class="cost"></div>