Question

我有以下结构

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

我的追加操作就像这样

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

这里我没有得到div的宽度.. 虽然附加div我无法获得宽度但是如果我点击或拖动那个div（item_left）后，我会得到确切的宽度。但是，如何在第一次（追加后）获得div的宽度？

Answer 1

为了显示正在发生的事情，我添加了一个id =＆＃34; myContainer＆＃34;到你的HTML，所以我们可以将新元素附加到该div：

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

现在我们将var container设置为该ID（也许您还有一些其他代码可以获取要附加的ID）：

var container = "myContainer"

在第二行中，您使用$("<div></div>")创建一个新div。这将返回一个jQuery对象，所以让我们将变量$templateContainer命名为澄清。然后，您要将id-attribute设置为template_group_myContainer，因此您必须在+内使用.attr()而不是逗号。所以第二行必须是：

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

在第三行中，您克隆$("#item")。它返回一个jQuery对象，因此将变量$cloneNode命名为澄清。在第四行中，您希望将克隆的ID设置为item_left，但是您错过了属性名称id，并且此处名称前面的#不正确。你也可以通过链接在一行中完成两个，所以第3行和第4行：

var $cloneNode = $("#item").clone().attr('id', "item_left");

由于我们已经有了一个jQuery对象$cloneNode，我们不需要再次这样做：完全删除第5行。在第7行中，您将克隆附加到$templateContainer。由于这已经是jQuery，因此无需再次执行$()，第7行应该如下所示：

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

现在$cloneNode附加到$templateContainer，但$templateContainer本身（以及其中的所有内容）此时并未附加到任何位置。这就是为什么第8行var c绝对正确为null：不在DOM中的元素根本没有宽度。

在第9行中，您将$templateContainer（以及其中的所有内容）附加到#myContainer。 $templateContainer已经是jQuery，所以再次没有$()而第9行变为：

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

从$templateContainer上的那一刻起，其中的所有元素都有一个宽度，在第10/13行中更正代码var d / var a后得到正确的值（36）。

DEMO, use console

顺便说一句，在您的代码$("#item_left")和$("#item" + '_' + "left")获得与var $cloneNode相同的元素时，最好使用var而不是一次又一次地重复$()

追加后无法获得div宽度

1 个答案: