javascript - 迭代 ul 中的每个 li

Question

我有一个日历。每一天都有以下结构开始。

<td>
    <ul class="calendar-tasks">
    </ul>
</td>

现在，我使用以下命令将任务拖到 ul 内:

$(function() {
    var $tasks = $(".list-tasks"),
        $calendar = $(".calendar-tasks");
    $("li", $tasks).draggable({
        revert: false,
        helper: function (event, ui) {
            return $("<div class='task-image'><span class='icon-pushpin'></span></div>");
        },
        cursorAt: { left: 25 },
        containment: "document",
        zIndex: 500
    });
    $("li", $calendar).draggable({
        revert: false,
        helper: function (event, ui) {
            return $("<div class='task-image'><span class='icon-pushpin'></span></div>");
        },
        cursorAt: { left: 25 },
        containment: "document",
        zIndex: 500
    });
    $calendar.droppable({
        accept: ".list-tasks > li, .calendar-tasks > li",
        activeClass: "highlight-active",
        hoverClass: "highlight-hover",
        drop: function (event, ui) {
            var dropped = $(this).append(ui.draggable);
            var task = $(ui.draggable).attr("data-task"),
                classname = $(ui.draggable).attr("data-class");
            $(this).find("li").each(function() {
                if ($(this).hasClass("has-task")) {
                    // Do nothing
                } else {
                    $(this).find("li").append("<div data-task='" + task + "' class='listed-task " + classname + "'>#" + task + "</div>");
                    $(this).find("li").addClass("has-task");
                }

            });
        }
    });
    $tasks.droppable({
        accept: ".calendar-tasks > li",
        activeClass: "highlight-active2",
        hoverClass: "highlight-hover2",
        drop: function (event, ui) {
            $(this).append(ui.draggable);
        }
    });
});

每一滴都是一个<li></li>本身包含一些内容。每次删除后，li 应该获得一个类 has-task 。我有点努力让这件事发挥作用。一切都发生在下面的代码中:

    $calendar.droppable({
        accept: ".list-tasks > li, .calendar-tasks > li",
        activeClass: "highlight-active",
        hoverClass: "highlight-hover",
        drop: function (event, ui) {
            var dropped = $(this).append(ui.draggable);
            var task = $(ui.draggable).attr("data-task"),
                classname = $(ui.draggable).attr("data-class");
            $(this).find("li").each(function() {
                if ($(this).hasClass("has-task")) {
                    // Do nothing
                } else {
                    $(this).find("li").append("<div data-task='" + task + "' class='listed-task " + classname + "'>#" + task + "</div>");
                    $(this).find("li").addClass("has-task");
                }

            });
        }
    });

我认为如果我迭代每个 <li> this将受到li的约束.

我做错了什么？

Answer 1

第一个 $(this).find("li").each() 函数迭代每个 li 元素。通过再次调用 $(this).find("li").each，您将引用 li 第一个列表中列出的 li 元素code> 元素:我认为不存在。