2

我正在进行一个项目，在某种程度上，有一个检查按钮，当检查它时将其重新定位到底部。这是它的标记：

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

});

我希望将.subTaskdiv 附加到.subTaskWrapperdiv，所以在这种else情况下我首先尝试了这个：

else {
        $(this).css("opacity", "1.0")
            .siblings(".optTrigger , .subHolder").hide()
            .parent().data("checked",true).appendTo($(this).parent());
    }

我认为.appendTo在这种情况下会将 div 附加.subTask到.subTaskWrapperdiv，但我收到了这个错误：

未捕获的错误：HIERARCHY_REQUEST_ERR：DOM 异常 3

但是当我向 中添加另一个.parent()时.appendTo($(this).parent())，它起作用了，所以它变成了

.appendTo($(this).parent().parent())

我想知道为什么在第一种情况下会生成此异常，以及.appendTo当它位于之后如何受到影响，它是.parent()附加.parent()的还是只是原始的$(this)？

4

1 回答 1

4

看起来您正在向自身附加一个元素；这将解释 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
于 2012-09-03T18:19:03.617 回答