Question

听起来很奇怪我的代码就是这样：

$element = "<div>Testing</div>";
_.each($('.chat-messages'), function(el) {
  el.append($element);
  debugger;
});

如果我从debugger进行检查，当我在控制台中输入el时，我可以清楚地看到$element.el已成功附加。但是，当我单击“继续”时，该元素从未添加。

$('.chat-messages')选择器返回两个对象。第二个是$element.el添加就好了。第一个没有。即使第一个肯定会返回与第二个相同类型的对象。在调试器中，我可以清楚地看到该对象已附加到el。它永远不会添加到实际的HTML中。只是调试器中的表示对象。

我是不是没有正确选择el？第一个和第二个怎么可能不同？

Answer 1

虽然我必须使用timeout，因为div在此之前不会呈现
你认为你有类似的问题，比如UI还没有渲染吗？
如果最初要求的OP元素是字符串值"<div>Testing</div>"

var f = function() {
  $element = "<div>Testing</div>";
  _.each($('.chat-messages'), function(el) {
    el.append($element);
    //debugger;
  });
};

setTimeout(f, 100);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='chat-messages'>
<div class='chat-messages'>
<div class='chat-messages'>
<div class='chat-messages'>

编辑：

在完成评论后，我快速研究了append的工作原理以及如果我们将$element与实际的$("<div>Testing</div>")进行交换，只会发现评论会发生什么是真的

注1： - $.each不是必需的，因为您可以选择与结果匹配的所有元素并立即追加

var f = function() {
  $element = $("<div>Testing</div>");
  $('.chat-messages').append($element);
};

setTimeout(f, 100);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='chat-messages'></div>
<div class='chat-messages'></div>
<div class='chat-messages'></div>
<div class='chat-messages'></div>

现在让我们使用$.each

var f = function() {
  $element = $("<div>Testing</div>");
  $('.chat-messages').each(function(ix, el) {
    $(el).append($element);
  });
};
setTimeout(f, 100);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='chat-messages'></div>
<div class='chat-messages'></div>
<div class='chat-messages'></div>
<div class='chat-messages'></div>

注2：

使用每个元素迭代元素并追加将不会产生所需的结果，如评论中所述，并附加文档（粘贴在下面）

您还可以在页面上选择一个元素并将其插入   另一个：

$（“。enctainer”）。append（$（“h2”））;

如果以这种方式选择的元素插入到单个位置   在DOM的其他地方，它将被移动到目标（未克隆）：

jQuery追加似乎鬼附加在_.each语句

1 个答案: