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

Posted 2023-03-05

【中文标题】JQuery 查找具有特定类前缀的第一个父元素

【英文标题】：JQuery find first parent element with specific class prefix

【发布时间】：2011-11-19 10:24:20

【问题描述】：

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

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

【问题讨论】：

停止。使用多个类，而不是将信息组合到一个类中。 'matching' 选择器很慢，而且这种设计不适用于任何修改。 <div class='a'>，然后为div.a 提供规则。实际上，我根本不知道您为什么将 div 放在类名中。

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

@StefanKendall：有时您正在处理其他人的第三方垃圾，有时您正在支持无法快速修复的遗留应用程序。糟糕的设计是生活中的事实，这是一个完全合理的问题。

【参考方案1】：

将.closest() 与选择器一起使用：

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

【讨论】：

顺便说一句，不知道为什么这被否决了。类前缀选择器很脆弱，但它会工作。

致 OP：确保您要查找的元素是 DOM 树上某处的父元素，而不是您要查找的对象的兄弟或类似对象（根据文档）。它不是“文档中最接近的位置”，而是“通过处理 DOM 树最接近”。

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

@Time 然后删除div 元素选择器：$('#divid').closest('[class^="div-a"]')。不过，正如@Stefan 评论的那样，您确实应该使用多个类。

这个选择器需要大量的循环（但它仍然可以很快）。如果你需要支持 IE6、IE7 或 IE8，如果你的 DOM 变得太大，这真的会搞砸你；当执行一定数量的 JS VM 指令时，IE 会抛出“脚本没有响应”对话框，而不是在一定时间后。由于这个原因，我已经看到在 0.1 毫秒内完成的脚本会导致 Internet Explorer 崩溃。

【参考方案2】：

Jquery 后来允许你用.parents() 方法找到父母。

因此我建议使用：

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

这给出了匹配选择器的所有父节点。要获得匹配选择器的第一个父级，请使用：

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

对于其他此类 DOM 遍历查询，请查看 traversing the DOM 上的文档。

【讨论】：

答案没有误导性，它只是展示了 .closest() 的另一种替代方法，.parents() 看起来更具可读性，是解决问题的另一种方法。

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

有趣的是，我最终使用了这个解决方案，因为 .parentsUtil() 没有按我的预期工作。