在ul中迭代每个li

I have a calendar. Each days has the following structure to begin with.

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

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

Now, I drag tasks inside the ul with the following:

现在,我使用以下内容在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);
        }
    });
});

Each drop is an <li></li> itself with some content in it. After each drop the li should get a class has-task. I'm kinda struggling atm to get this thing working. All is happening in the following piece of code:

每一滴都是

本身,其中包含一些内容。每次下降后,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");
                }

            });
        }
    });

I though that if I iterate through each <li> this will be subject to that li.

我虽然如果我遍历每个

,这将受制于那个li。

What am I doing wrong?

我究竟做错了什么?

2 个解决方案

#1

The first $(this).find("li").each() function iterates through each li element. By calling $(this).find("li").each again, you're referring to li elements listed in the first list of li elements: which I assume do not exist.

第一个$(this).find(“li”)。each()函数遍历每个li元素。通过再次调用$(this).find(“li”)。你指的是第一个li元素列表中列出的li元素:我认为它们不存在。

#2

$(this).find("li").each(function() { //check what 'this' object is giving. }

Based on 'this' object use prev() or next() to point the li object and follow ur code as usual.

基于'this'对象使用prev()或next()来指向li对象并照常跟踪你的代码。