如何使用 jquery 获得精确的 div 标签匹配选择器？

Posted 2023-05-09

【中文标题】如何使用 jquery 获得精确的 div 标签匹配选择器？

【英文标题】：How to get exact div tag matching selector using jquery?

【发布时间】：2020-10-28 11:31:37

【问题描述】：

我想获得匹配 jquery 选择器的确切标签（不是父标签）。 这是我的代码：

var tagList = $('div:contains("Hello")');
alert(tagList.length);

这个选择器返回一个标签列表（长度为4），它们都是匹配标签的父div。

<div>
  <div>
     <div>
        <div> Hello </div>   //I want to get only this element
     </div>
  </div>
     <div>     //I also tried to get deepest children but result contains this siblings of parents too.
     </div>
</div>

如何将结果减少到只有一个匹配规则的元素。

【问题讨论】：

从返回的jQuery对象中取出last元素..?

这能回答你的问题吗？ jQuery: find element by text

【参考方案1】：

这里我用filter的方法来检查children，如果有没有child，那么那就是你想要的元素。

Learn more about contains,filter and wrap methods of jQuery

var tagList = $('div:contains("Hello")').filter(function()
    return this.children.length === 0;
  );
console.log(tagList.length);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div>
     <div>
        <div> Hello </div>
     </div>
  </div>
  <div>
  </div>
</div>

【参考方案2】：

你可以设置一个id来识别div

var tagList = $('#hello').text();
alert(tagList.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div>
  <div>
    <div>
      <div id="hello">Hello</div>
    </div>
  </div>
  <div>     //I also tried to get deepest children but result contains this siblings of parents too.
  </div>
</div>

【讨论】：

无法为动态数据设置 id。同时，文本内容可以与其他文本一起存在于可能的元素中。但是你不能为每个设置相同的 id。

我不想设置id。

如今，最好避免设置 ID，除非您有特定的理由使用 ID。它们使全局范围变得混乱。浏览器使用选择器的速度非常快，而且 API 已经改进了很多年。