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);
        }
    });
});

每个drop都是<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(function() { //check what 'this' object is giving. }

根据“此”对象，使用prev()或next()指向li对象，并像往常一样关注您的代码。

Answer 2

第一个$(this).find("li").each()函数遍历每个li元素。通过再次调用$(this).find("li").each，您指的是第一个li元素列表中列出的li元素：我认为这些元素不存在。

在ul中迭代每个li

2 个答案: