Question

我有一个附加子函数，我将新子存储为一个名为'newNode'的变量。但是当我控制newNode时它会返回两次。为什么？我在点击事件上调用此函数。

function appendNewStage() {
 var parent = $('.ci-journey-interactions-canvas__row');
 var newStage = `<ul class="ci-journey-interactions-canvas__journey-
                 list stage">
                 <li>
                 <span class="ci-journey-interactions-box__droppable-
                 element ci-droppable"></span>
                 </li>
                 </ul>`;

 var position = $(parent).find("ul:last").position();
 var width = $(parent).find("ul:last").outerWidth();
 newNode = $(newStage).appendTo(parent);
 console.log(newNode);
 if (remain.length > 0) {
     newNode.html(remain);
 }
 $(newNode).find('li:first-child').addClass('first-child');
 newNode.css({
     "position": "absolute",
     "left": (width + position.left - 89),
     "top": (position.top + 140)
 });
 var dropArea = $(newNode).find('.ci-droppable');
 dropArea.droppable();
 dropArea.droppable({
     accept: ".ci-draggable",
 });
 elementSelect(newNode);
 };

请帮我解决这个问题。

Answer 1

但是当我控制newNode时它会返回两次。为什么呢？

如果你在jQuery对象newNode中看到两个条目，那是因为有两个.ci-journey-interactions-canvas__row个元素。当有多个目标父项时，appendTo会复制您传递的结构，并返回包含所有这些结构的新jQuery对象。来自the documentation：

但是，如果有多个目标元素，则除了最后一个和那个新集合（原始元素加克隆）之外，将为每个目标创建克隆的插入元素的克隆副本 ）被退回。

（我的重点）

这是一个更简单的例子：

var newNode = $("<span>x</span>").appendTo(".foo");
//               ^^^^^^^^^^^^^^--- Only one span
console.log(newNode.length);            // 2
console.log(newNode[0].nodeName);       // span
console.log(newNode[1].nodeName);       // span
console.log(newNode[0] === newNode[1]); // false

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

appendTo函数运行两次

1 个答案: