我正在制作一个项目,在某些行中,有一个检查按钮,检查时会将其父项重新定位到底部。这是它的标记:
<div id="tasksWrapper">
<div class="subTaskWrapper">
<div class="subTask">
<div class="subMarker"></div>
<label class="subTaskLabel"></label>
<div class="subHolder"></div>
<div class="subOptions">
<ul>
<li id="subInfo">Details</li>
<li id="subEdit">Edit</li>
<li id="subDelete">Delete</li>
</ul>
</div>
<div class="checkButton"></div>
<div class="optTrigger"></div>
</div>
// more than one of that subTask divs ...
</div>
</div>
这是它的代码:
$("#tasksWrapper").on("click", ".subTask .checkButton", function(){
if($(this).parent().data("checked") == true){
$(this).css("opacity", "0.2")
.siblings(".optTrigger , .subHolder").show()
.parent().data("checked",false);
} else {
$(this).css("opacity", "1.0")
.siblings(".optTrigger , .subHolder").hide()
.parent().data("checked",true).appendTo($(this).parent().parent());
}
});
我希望将 .subTask
div 附加到 .subTaskWrapper
div,所以在 else
情况下我首先尝试了这个:
else {
$(this).css("opacity", "1.0")
.siblings(".optTrigger , .subHolder").hide()
.parent().data("checked",true).appendTo($(this).parent());
}
我认为在这种情况下.appendTo
会将.subTask
div附加到.subTaskWrapper
div,但我得到了这个错误:
Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3
但是当我将另一个 .parent()
添加到 .appendTo($(this).parent())
时,它起作用了,所以它变成了
.appendTo($(this).parent().parent())
我想知道为什么在第一种情况下会生成此异常,以及 .appendTo
位于 .parent()
之后时有何影响,是否附加 .parent()
还是原来的 $(this)
?
最佳答案
看起来您正在向其自身添加一个元素;这可以解释 DOM 层次结构错误。如果把链条的核心部分剥离出来,效果是:
$(this).parent().appendTo($(this).parent());
换句话说:
$(this).css("opacity", "1.0") // $(this) refers to checkButton
.siblings(".optTrigger , .subHolder") // context is still checkButton
.hide()
.parent() // context is now subTask
.data("checked",true) // still subTask
.appendTo($(this).parent()); // $(this).parent() is subTask
// so, this line says to append subTask to itself
关于jquery - .prependTo() 是否遵循 jQuery 链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12252420/