Javascript 追加后无法获取div宽度

我有以下结构

<div id="item">
   <div id="template">
      <div id="Div1">
      </div>
   </div>
</div>
<style>
    #template {
        width: 30px;
        height: 30px;
        background: #99ff66;
        border: 3px solid black;
        border-radius: 50%;
    }

    #Div1 {
        width: 20px;
        height: 20px;
        background: black;
        margin-left:5px;
        margin-top:5px;
        border-radius: 50%;
    }
</style>

#模板{
宽度：30px；
高度：30px；
背景:#99ff66；
边框：3倍纯黑；
边界半径：50%；
}
#第一组{
宽度：20px；
高度：20px；
背景：黑色；
左边距：5px；
边缘顶部：5px；
边界半径：50%；
}

我的追加操作是这样的

var container = this._id;
var templateContainer = $("<div></div>").attr('id', "template_group_", container);
var cloneNode = $("#item").clone();
$(cloneNode).attr("#item" + '_' + "left");
var $cloneNode = $(cloneNode);
$cloneNode.css("position", "absolute");
$cloneNode.css("display", "block").appendTo($(templateContainer));
var c = $("#item_left").width();// here i am getting null
$(templateContainer).appendTo('#' + container);
var d = $("#item_left").width(); // here i am getting 0
var top = 10;
$cloneNode.css("top", top).css('cursor', 'pointer');
var a = $("#item" + '_' + "left").width(); // here i am getting 0 

var container=this.\u id；
var templateContainer=$（“”）.attr（'id'，“模板组”，容器）；
var cloneNode=$（“#项”）.clone（）；
$（cloneNode.attr（“#item”+'"左“+”）；
变量$cloneNode=$（cloneNode）；
$cloneNode.css（“位置”、“绝对”）；
$cloneNode.css（“显示”、“块”）.appendTo（$（templateContainer））；
var c=$（“#项_左”）.width（）；//这里我得到零
$（templateContainer）.appendTo（“#”+容器）；
变量d=$（“#项_左”）.width（）；//在这里我得到了0
var-top=10；
$cloneNode.css（“top”，top）.css（'cursor'，'pointer'）；
变量a=$（“#项“+”“+“左”）.width（）；//在这里我得到了0

这里我没有得到div的宽度。。 追加div时，我无法获得宽度，但

---

附加后，如果我单击或拖动该div（项目左），我将获得确切的宽度。但是，如何在第一次（附加后）获得该div的宽度？

要显示发生了什么，我已在HTML中添加了一个id=“myContainer”的div，以便我们可以将新元素附加到该div：

<div id="myContainer"></div>

在第二行中，您使用

$（“”）

创建了一个新的div。这将返回一个jQuery对象，因此我们将变量命名为

$templateContainer

，以澄清这一点。然后，您需要将id属性设置为

template\u group\u myContainer

，因此必须在

.attr（）

中使用

+

而不是逗号。因此，第二行必须是：

var $templateContainer = $("<div></div>").attr('id', "template_group_" + container);

因为我们已经有了一个jQuery对象

$cloneNode

，所以不需要再做一次：完全删除第5行。在第7行中，将克隆附加到

$templateContainer

。由于这已经是一个jQuery，因此无需再次执行

$（）

，第7行应该如下所示：

$cloneNode.css("display", "block").appendTo($templateContainer);

现在，

$cloneNode

被附加到了

$templateContainer

，但此时，

$templateContainer

本身（以及其中的所有内容）并没有附加到任何地方。这就是为什么在第8行中var c是绝对正确的 is null：不在DOM中的元素没有宽度

在第9行中，您将

$templateContainer

（以及其中的所有内容）附加到

#myContainer

$templateContainer

已经是jQuery，所以再次没有

$（）

，第9行变成：

$templateContainer.appendTo('#' + container);

从那时起，

$templateContainer

中的所有元素都有一个宽度，在第10/13行中更正代码

var d/var a

后，得到正确的值（36）

---

顺便说一句，在你的代码中，

$（“#item_left”）

和

$（“#item”+''.+“left”）

获得了与

var$cloneNode

相同的元素，最好使用var，而不是反复重复

$（）

。

你能与你的问题分享一下jsfiddle链接吗statement@AkbarBasha请停止编辑此文件。我已经为您修复了它，在您编辑了更多格式错误后，我不得不回滚到它两次。这是什么？

。\u id

显示完整功能，并且代码中存在一些语法错误。嗨，Venkata Panga，这是。\u id是我附加模板的容器。\u组

$cloneNode.css("display", "block").appendTo($templateContainer);

$templateContainer.appendTo('#' + container);