jquery 每个 function 拖放 jquery ui

Question

为什么当我在#docs中拖放2个“Android”时，有3个“我想要#dz中的每个android一个li”？ 和 6 当我放弃 3 等时...

    $("#dz").droppable({
        accept: ".systeme",
        drop: function(e, ui) {
            $(ui.draggable).clone().appendTo($("#dz"));
            setTimeout(function(){

                $("#dz .android").each(function() {
                    $("#docs").append("<li>i want one li for each android inside #dz</li>");
                }, 10);
              });
        }

https://codepen.io/Cyril29/pen/dybLaam

谢谢！

Answer 1

因为您添加了“我想要 #dz 内的每个 android 一个 li”

当你在#dz中已经有1个“Android”时，已经有1个“我想要#dz中的每个android一个li”

当你放下第二个“Android” $("#dz.android").each()调用 2 次（在 1 中已经添加了2 个新的）

解决方案1：

drop: function(e, ui) {
      $(ui.draggable).clone().appendTo($("#dz"));
      setTimeout(function(){
        $("#docs").empty() // remove all elements in #docs 
        $("#dz .android").each(function() {
          $("#docs").append("<li>i want one li for each android inside #dz</li>");
        }, 10);
      });
    }

解决方案2：

drop: function(e, ui) {
      $(ui.draggable).clone().appendTo($("#dz"));
      setTimeout(function(){
          $("#docs").append("<li>i want one li for each android inside #dz</li>");
      });
    }

Answer 2

这是因为您正在使用$each function 循环$("#dz.android") 。

一个li元素首先出现，因为只有一个.android可以循环。

在第二次尝试时，第一个li仍然存在，而您又拖了另一个过去。 现在有两个存在于$("#dz.android")中。

因此， each 循环会触发两次，从而再创建两个li 。 因此，现在有 3 个列表元素。

在第三个可拖动事件中，创建了 3 个li ，它们被添加到现有的 3 个中。因此总共 6 个。