javascript - jquery每个函数和拖放jquery ui

Question

为什么当我拖放 2 个“Android”时，在 #docs 中有 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

谢谢！

标签： javascriptjqueryjquery-ui-draggable

Answer 1

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

当您已经有 1 个“Android”时，#dz“我想要 #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>");
      });
    }