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 的第一个列表中列出的元素元素:我认为不存在。