如何在DOM中以克隆元素为目标（jQuery）

这是我的标记：

<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\u price的类更改为.sc\u box\u 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);
});

$（文档）.ready（函数（）{
“严格使用”；
变量箱价格=$（“.sc箱价格”）；
var合计=0；
$（方框价格）。每个（函数（）{
total+=parseInt（$（this.text（））；
});
$（'.cost'）。前置（“+total+”）；
控制台日志（总计）；
});

由于某些原因，我无法确定.sc\u盒的价格。也许是因为.sc\u-box\u-price实际上没有添加到DOM中？如何修复此问题？

而不是

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

现在，在追加后，将其他代码添加到appendTo语句后的

onClick事件中

，而不是每次追加div，您只需更改

成本

div的文本即可。我想这就是您想要的

$（文档）.ready（函数（）{
$（“.box_按钮”）。单击（函数（）{
var box_content=$（this）.parents（'.box'）.clone（）；//已克隆box
var价格=$（方框内容）。查找（“.方框价格”）；
$（price）.toggleClass（'box\u price sc\u box\u price'）；//类更改为sc\u box\u price
$（框内容）.appendTo（'.container'）；//追加框
变量箱价格=$（“.sc箱价格”）；
var合计=0；
$（方框价格）。每个（函数（）{
total+=parseInt（$（this.text（））；
});
$（“.cost”）.text（总计）；
});
});
。成本{
颜色：红色；
}

180
点击我
130
点击我
270
点击我
您的
追加
调用是向后的。试试这个

但是，请注意，附加的“单击我”元素将没有与其关联的
Click
事件。这是你的意图吗

另外，我认为您可能希望在
$（'.cost'）
上使用
html
调用，而不是
append


$（文档）.ready（函数（）{
“严格使用”；
$（“.box_按钮”）。单击（函数（）{
var box_content=$（this）.parents（'.box'）.clone（）；//已克隆box
var价格=$（方框内容）。查找（“.方框价格”）；
$（price）.toggleClass（'box\u price sc\u box\u price'）；//类更改为sc\u box\u price
//$（框内容）.append（'.container'）；//框被追加
$（'.container'）.append（框内容）；//框被追加
计算价格（）；
});
});
函数计算价格（）{
变量箱价格=$（“.sc箱价格”）；
var合计=0；
$（方框价格）。每个（函数（）{
total+=parseInt（$（this.text（））；
});
$（'.cost'）.html（“+total+”）；//以前：$（'.cost'）.append
控制台日志（总计）；
}

180
点击我
130
点击我
270
点击我
您的代码中有许多错误。这个主意是什么？大概是这样的：


$（文档）.ready（函数（）{
“严格使用”；
$（“.box_按钮”）。单击（函数（）{
var box_content=$（this）.parents（'.box'）.clone（）；
var价格=框内容。查找（“.box价格”）；
price.toggleClass（'box\u price sc\u box\u price'）；
$（'.container'）。追加（价格）；
//box_content.append（'.container'）；//追加框
变量箱价格=$（“.sc箱价格”）；
var合计=0；
框_价格。每个（函数（）{
total+=parseInt（$（this.text（））；
});
$（'.cost'）.html（“总计：+Total”）；
});
});

180
添加到购物车
130
添加到购物车
270
添加到购物车


购物车：
请检查是否仅在克隆项目后才更改类别。我希望克隆后对原始对象的更改不会反映在克隆上。是否改为：
$（box\u content）.appendTo（'.container'）？？？仅供参考，
box\u content
已经是jq对象，因此无需再次包装它，例如：
var price=box\u content.find（“.box\u price”）顺便说一句，
价格
已经是jq的目标，等等。。。
take this new thing and appendTo an already existing thing
vs
take already existing thing and append this new thing