jquery - .prependTo() 是否遵循 jQuery 链接？

Question

我正在制作一个项目，在某些行中，有一个检查按钮，检查时会将其父项重新定位到底部。这是它的标记:

<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) ？

Answer 1

看起来您正在向其自身添加一个元素；这可以解释 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