jquery - 如何定位 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>

所以我使用以下代码在 jQuery 中克隆并附加了一些 .box div 从 .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 和 append 之间有区别，即

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

这就是为什么你需要使用 appendTo()

现在，在附加后，将您的其他代码添加到 onClick 事件中，在 appendTo 语句之后 此外，您不必每次都附加一个 div，只需更改 cost div 的文本即可。我想这就是您想要的。

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