[英]Iterate through each li in ul
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. 每个放置都是一个
<li></li>
本身,其中包含一些内容。 After each drop the li should get a class has-task
. 每次下降之后,li应该获得一个类
has-task
。 I'm kinda struggling atm to get this thing working. 我有点挣扎在自动取款机上,以使其正常工作。 All is happening in the following piece of code:
一切都在以下代码中发生:
$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>
this
将受到该li
。
What am I doing wrong? 我究竟做错了什么?
$(this).find("li").each(function() { //check what 'this' object is giving. }
基于“ this”对象,使用prev()
或next()
指向li
对象,并照常遵循ur代码。
The first $(this).find("li").each()
function iterates through each li
element. 第一个
$(this).find("li").each()
函数遍历每个li
元素。 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
元素的第一个列表中列出的li
元素:我认为这不存在。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.