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，但是我收到了这个错误：

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

但是当我向.parent()添加了另一个.appendTo($(this).parent())时，它就有效了，所以它变成了

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

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

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

.prependTo（）是否遵循jQuery链接？

1 个答案: