parent().parent().parent() - 更好的方法？ [复制]答案

【问题标题】：parent().parent().parent() - a better way? [duplicate]parent().parent().parent() - 更好的方法？ [复制]
【发布时间】：2014-02-11 13:12:59
【问题描述】：

我经常使用这样的代码：

$(document).on("click", ".cChatSmileyWindow", $.proxy(function(e) {
    var windowID = $(e.currentTarget).parent().parent().parent().data("windowid");
}, this));

有没有更好的方法来做到这一点？ HTML 如下所示：

<span class="dropdownMenu dropdownArrowRight dropdownArrowBottom dropdownOpen" id="cChatSmileyBox1" data-windowid="1">
    <ul class="cChatSmileyList">
        <li>
            <span class="cChatSmileyListSmiley cChatSmileyWindow">
                <!-- ... -->
            </span>
        </li>
    </ul>
</span>

我尝试了$(e.currentTarget).parent('dropdownMenu').data("windowid");，但它不起作用。

【问题讨论】：

$(e.currentTarget).parents('.dropdownMenu') 是正确的语法
如果您将 .parent('dropdownMenu') 更改为 .parents('.dropdownMenu') 它应该可以工作，假设只有一个具有 .dropdownMenu 的父级

标签： jquery

【解决方案1】：

尝试最近的（）：

var windowID = $(e.currentTarget).closest(".dropdownMenu").data("windowid");

【讨论】：

我什至不知道这存在。酷！
如果 .dropdownMenu 类的元素正好位于 .cChatSmileyWindow 的下方会怎样？
.closest() 只查看祖先。如果下面有另一个作为兄弟姐妹，您将使用 next() 查找它。 “最接近”并不意味着物理上最接近。这意味着最近的祖先。
请阅读本文以了解最接近的和父母之间的区别：api.jquery.com/closest 我仍然认为您希望最接近您的问题，因为它直接涉及到 first() 元素 - 得到的工作要少得多得到相同的答案。
我同意 David Fleeman 的观点，正如他所说（以及我在下面的回答中） parents() 做了更多的工作并且有可能返回多个元素。根据您要执行的操作，您似乎只想返回一个元素。

【解决方案2】：

根据jQuery docs，你必须使用parents()：

$(e.currentTarget).parents('dropdownMenu').first().data("windowid");

【讨论】：

【解决方案3】：

$(e.currentTarget).parent('dropdownMenu').data("windowid"); 不起作用的原因是因为 dropdownMenu 不是父级。此外，您错过了 dropdownMenu 前面的句点，但无论如何它都不起作用。

怎么样：

$(e.currentTarget).closest('.dropdownMenu').data("windowid")

我相信closest() 会返回一个元素，而parents() 可能会返回多个。

【讨论】：