Question

假设我有这种元素结构：

<div class="parent">
    <div class="something1">
        <div class="something2">
            <div class="something3">
                <div class="something4"></div>
            </div>
        </div>
    </div>   
</div>

这样的代码：

$(".something4").click(function(){
   //i could do it like this...
   $(this).parent().parent().parent().parent().parent();
});

但这似乎很愚蠢，有更好的方法吗？

我也不能只说$(.parent)，因为我的页面中有很多类似于此类的div parent。

Answer 1

使用.closest(selector)。这将获得与选择器匹配的第一个元素，从当前元素开始并逐步向上遍历DOM树。

$('.something4').click(function() {
  $(this).closest('.parent');
});

Answer 2

使用.closest()：

$('.something4').click(function() {
    $(this).closest('.parent');
});

Answer 3

我认为你应该试试这个

$(this).parents(".parent");

但是我不知道页面上哪个是这个类的其他div：）

Answer 4

您始终可以使用.parentNode（标准JavaScript）。使用与您正在使用的库中的函数/变量名称一致的类名（这适用于任何语言）通常是个坏主意。如果您的应用程序的名称是“超级计算器”或其他东西，那么使您的类名更加独特是一种更好的方法（例如，“scparent”而不是“parent”）。这可以避免诸如您所描述的冲突之类的冲突。

我会谨慎使用.closest()，因为你可以创建一个这样的函数：

function getParentElem() {
    return $(this).closest('div');
}

它会在你的代码中抓取父div就好了，但如果你在路上添加一个用于显示数据的表，并通过表的子元素运行该函数，你将必须创建另一个选择table元素的实现，因为这是你现在想要的：

<div id="tableParent">
    <table id="dataTable">
        <tr id="target1">
            <td>Some data.</td>
        </tr>
    </table>
</div>

通过在getParentElem()元素上使用您的函数tr，您最终会抓取div的id =“tableParent”，而不是实际的父级，即{ {1}}元素。因此，除非您在代码中一直适当地描述了您的父类（这可能很痛苦并且并不总是有效），否则您可能会遇到问题。特别是如果您在任何时候以编程方式创建元素，或从另一个第三方库或脚本中读取数据。

不是说使用table并不好......只是指出一个可能的“陷阱”。

Answer 5

我建议在div父母身上添加一个像'parent_1'等的id。在每个儿子中你都将id保存在rel attr

<div id="parent_1" class="parent">
    <div rel="1" class="something1">
        <div rel="1" class="something2">
            <div rel="1" class="something3">
                <div rel="1" class="something4"></div>
            </div>
        </div>
    </div>   
</div>

$(".something4").click(function(){
   //i could do it like this...
   $('#parent_' + $(this).attr('rel'));
});

获取元素父级的最简单方法

5 个答案: