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をdivに追加したい.subTaskWrapperので、else最初にこれを試した場合:

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

この場合、divにdivを.appendTo追加すると思いましたが、このエラーが発生しました:.subTask.subTaskWrapper

キャッチされないエラー: HIERARCHY_REQUEST_ERR: DOM 例外 3

しかし、別のものを に追加.parent()すると.appendTo($(this).parent())、機能したので、

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

この Exception が最初のケースで生成される理由と、それが後に.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 に答える