如何在 jQuery 中找到具有已知类的父级？答案

【问题标题】：How to find a parent with a known class in jQuery?如何在 jQuery 中找到具有已知类的父级？
【发布时间】：2011-03-17 00:29:23
【问题描述】：

我有一个<div>，其中还有许多其他<div>s，每个都位于不同的嵌套级别。与其给每个孩子<div> 一个标识符，我宁愿只给根<div> 一个标识符。这是一个例子：

<div class="a" id="a5">
  <div class="b">
    <div class="c">
      <a class="d">
      </a>
    </div>
  </div>
</div>

如果我在 jQuery 中编写一个函数来响应 d 类，并且我想找到它的父类 a 的 ID，我该怎么做？

我不能简单地做$('.a').attr('id');，因为有多个类as。我可以找到它的 parent 的 parent 的 parent 的 ID，但这似乎设计不佳、速度慢且不是很多态（我必须编写不同的代码来查找 class c 的 ID）。

【问题讨论】：

标签： javascript jquery html dom parent

【解决方案1】：

假设this是.d，你可以写

$(this).closest('.a');

closest method 返回与选择器匹配的元素的最内层父级。

【讨论】：

请注意，有一点小问题：如果您的起始元素也与查询匹配，那么您不会得到父元素，而是相同的元素。这可能是也可能不是想要的行为。如果没有，我推荐这个：$(this).parent().closest('.a');
非常有帮助。我总是习惯这样做 $(this).parent().parent().parent() 并且我知道有更好的解决方案。

【解决方案2】：

将选择器传递给 jQuery parents 函数：

d.parents('.a').attr('id')

编辑嗯，如果你只想要与你的选择器匹配的最近的祖先，那么实际上 Slaks 的答案是更好的。

【讨论】：

【解决方案3】：

您可以使用parents() 来获取具有给定选择器的所有父母。

描述：获取每个的祖先当前匹配集合中的元素元素，可选地由 a 过滤选择器。

但是parent() 只会得到元素的第一个父元素。

描述：获取每个的父级当前匹配集合中的元素元素，可选地由 a 过滤选择器。

jQuery parent() vs. parents()

还有.parentsUntil()，我认为这是最好的。

描述：获取每个的祖先当前匹配集合中的元素元素，最多但不包括选择器匹配的元素。

【讨论】：

他只想要一个单身父母，所以他应该打电话给closest。

【解决方案4】：

从上面的@Resord 的 cmets 中提取。这个对我有用，并且更倾向于解决这个问题。

$(this).parent().closest('.a');

谢谢

【讨论】：

【解决方案5】：

<div id="412412412" class="input-group date">
     <div class="input-group-prepend">
          <button class="btn btn-danger" type="button">Button Click</button>
          <input type="text" class="form-control" value="">
      </div>
</div>

在我的情况下，我使用以下代码：

$(this).parent().closest('.date').attr('id')

希望这对某人有所帮助。

【讨论】：

【解决方案6】：

使用 .parentsUntil()

$(".d").parentsUntil(".a");

【讨论】：

这将针对每个父元素，直到到达匹配的父元素。