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

123

我想获得具有特定类前缀的第一个父母，假设：

<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">

jquery jquery-selectors

— 时间旅行
source

停止。使用多个类，而不是将信息组合到一个类中。“匹配”选择器很慢，该设计无法扩展任何修改。<div class='a'>，然后提供的规则div.a。我真的不知道为什么要div输入类名。

— Stefan Kendall

不过，不要将数据合并到类前缀中。这是一个可怕的模式，并且很容易通过多个类进行补救。

— Stefan Kendall，

@StefanKendall：有时您正在与他人的第三方垃圾打交道，有时您正在支持无法快速修复的旧版应用程序。不良的设计是生活中的事实，这是一个完全合理的问题。

— Nerdmaster 2013年

Answers:

221

使用.closest()与选择：

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

— 马特·鲍尔
source

顺便说一句，不知道为什么这被否决了。类前缀选择器很脆弱，但是可以使用。

— Matt Ball

对OP：确保您要查找的元素是DOM树上某个位置的父级，而不是您要查找的对象的同级或相似对象（根据文档）。它不是“文档中任何地方最近的”，而是“通过处理DOM树而最近的”。

— Christian P.

对我不起作用。另外，我想找到第一个具有特定前缀的元素，而不必是div元素。

— 时间旅行

@Time然后删除div元素选择器：$('#divid').closest('[class^="div-a"]')。但是，正如@Stefan所说，您实际上应该使用多个类。

— 马特·鲍尔

该选择器需要大量的周期（但是仍然可以很快）。如果您需要支持IE6，IE7或IE8，如果您的DOM太大，这确实会给您带来麻烦。当执行一定数量的JS VM指令时（而不是在一定时间后），IE会抛出“脚本不响应”对话框。出于这个原因，我已经看到在0.1ms崩溃的Internet Explorer中完成的脚本。

— Stefan Kendall，

jQuery稍后允许您使用该.parents()方法查找父母。

因此，我建议使用：

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

这将提供所有与选择器匹配的父节点。要获得与选择器匹配的第一个父对象，请使用：

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

对于其他此类DOM遍历查询，请查看有关遍历DOM的文档。

— Sunny R古普塔
source

答案不会引起误解，它只是展示了.closest（）的另一种选择，.parents（）看起来更具可读性，并且是解决该问题的另一种方法。

— Sunny R Gupta

最接近是比这更好的解决方案，因为最接近只会找到第一个匹配项，而父母会发现所有匹配项都在DOM上。显然，使用最接近的方法效率更高，尽管我同意，但这不是最佳命名的函数。

— Mog0 2014年

有趣的是，我最终使用了此解决方案，因为.parentsUtil（）未能按预期工作。

— Mark Handy