.prependTo() 是不是遵循 jQuery 链接？

Posted 2023-05-09

【中文标题】.prependTo() 是不是遵循 jQuery 链接？

【英文标题】：Does .prependTo() follow the jQuery chaining?.prependTo() 是否遵循 jQuery 链接？

【发布时间】：2012-08-28 11:02:30

【问题描述】：

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

<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

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

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

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

【问题讨论】：

您说您的代码正在使用parent().parent()。不要修复没有损坏的东西:)。要向自己确认为什么它会以这种方式工作，请尝试在浏览器中使用调试工具，例如console.log($(this))、console.log($(this).parent())、console.log($(this).parent().data("checked", true)) 等。此外，您还在询问Does .prependTo() follow the jQuery chaining?，但您的所有代码都与appendTo() 相关，这令人困惑。

我尝试使用console.log()，但我想放置它而不是.appendTo() 以了解当前$(this) 是什么，但我认为我不能在jQuery 中这样做，任何帮助.console.log() 在appendTo() 的位置将不胜感激。

在您的else 中，只需为您“链接”的每个元素放置控制台日志并观察控制台。例如，将控制台登录到您的 else 语句中：$(this)、$(this).css("opacity", "1.0")、$(this).css("opacity", "1.0").siblings(".optTrigger , .subHolder")、$(this).css("opacity", "1.0").siblings(".optTrigger , .subHolder").hide().parent()、$(this).css("opacity", "1.0").siblings(".optTrigger , .subHolder").hide().parent().data("checked",true) 和当然$(this).parent() 和$(this).parent().parent()。

【参考方案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

【讨论】：

啊，所以$(this).parent() 里面的.appendTo() 指的是.subTask 而不是.subTaskWrapper？那么.appendTo() 不遵循 jQuery 链接？因为我认为$(this)里面的.appendTo()指的是.subTask。

@Rafael 不，我认为这是正常的链接行为——链接只是意味着每个方法调用都返回相同的源对象。

@Rafael：我认为您的所有问题都可以通过 console.log 输出来回答，而不是第二次猜测哪个元素在哪里。请参阅我对原始问题的评论。

@Rafael this 与链接或 JQuery 无关。 this 上下文永远不会像那样改变。