使用JQuery查找具有特定类前缀的第一个父元素

Question

我想获得具有特定类前缀的第一个父元素，例如：

<div class="div-a3332"> 
  <div class="div-a89892">
    <p>
      <div class="div-b2">
        <div id="divid">hi</div>
      </div>
    </p>
  </div>
</div>

例如，我的当前元素是#divid，我想找到第一个具有类名前缀为div-a的元素。因此，它将选择：

<div class="div-a89892">

- Time Travel

---

停止使用将多个信息组合到一个类中的方法，改用多个类。"匹配"选择器速度较慢，这种设计不适用于任何修改的扩展。请使用<div class='a'>，然后提供div.a的规则。实际上，我不知道为什么你要把div放在类名里。 - Stefan Kendall

不要将数据合并到类前缀中。这是一种糟糕的模式，可以通过使用多个类轻松解决。 - Stefan Kendall

有时候你需要处理别人的第三方烂摊子，有时候你需要支持那些你无法快速修复的遗留应用程序。糟糕的设计是生活中不可避免的事实，这是一个完全合理的问题。 - Nerdmaster

Answer 1

使用带有选择器的 .closest() 方法：

var $div = $('#divid').closest('div[class^="div-a"]');

- Matt Ball

---

顺便说一句，不知道为什么这个被踩了。类前缀选择器虽然脆弱，但它确实有效。 - Matt Ball

给楼主：请确保你要查找的元素是DOM树中某个父级，而不是兄弟或类似于你要查找的对象（根据文档）。它不是“在文档中最接近”的，而是“通过向上遍历DOM树最接近”。 - Christian P.

这个选择器需要大量的周期才能执行（但仍然可以很快）。如果你需要支持IE6，IE7或IE8，当你的DOM变得太大时，这可能会让你非常困扰；当执行一定数量的JS VM指令后，IE会弹出“脚本未响应”对话框，而不是在一定时间后。我曾经看到一些0.1毫秒就完成的脚本因为这个原因而使Internet Explorer崩溃。 - Stefan Kendall

据我所知，自从我发布这个答案以来，.closest()和.parents()的语义没有任何改变。@SunnyRGupta - Matt Ball

要小心，因为'closest'也可能匹配当前元素。你可能需要使用parents(...).first()。 - Garr Godfrey

Answer 2

Jquery后来使用.parents()方法查找父元素。

因此，我建议使用：

var $div = $('#divid').parents('div[class^="div-a"]');

这将返回所有匹配选择器的父节点。若要获取第一个匹配选择器的父节点，请使用：

var $div = $('#divid').parents('div[class^="div-a"]').eq(0);

如果您需要其他类似的DOM遍历查询，请查看遍历DOM文档的文档。

- Sunny R Gupta

---

答案并不误导，它只是展示了另一种替代.closest()的方法，.parents()看起来更易读，也是解决问题的另一个方案。 - Sunny R Gupta

与此相比，closest更好，因为closest仅会找到第一个匹配项，而parents会找到所有向上遍历DOM的匹配项。 显然，使用closest更有效率，尽管我同意它并不是最合适的函数名。 - Mog0

有趣的是，最终我使用了这个解决方案，因为.parentsUtil()并没有像我预期的那样工作。 - Mark Handy