使用 JQuery 的 find 方法，如何根据“foo”的子元素的内容选择某个 HTML 元素“foo”的兄弟？

Posted 2023-05-09

【中文标题】使用 JQuery 的 find 方法，如何根据“foo”的子元素的内容选择某个 HTML 元素“foo”的兄弟？

【英文标题】：Using JQuery's find method, how do I select a sibling of some HTML element "foo", based on the content of a child of "foo"?

【发布时间】：2020-06-20 09:29:43

【问题描述】：

假设我有如下 html：

<div class="foo-container">
  <div class="foo">
    <div class="foo-child">
      <span>The Important Label</span>
    </div>
  </div>
  <div class="elem-to-manipulate">
    <p>I want to manipulate the style in this because it's the sibling of "The Important Label"</p>
  </div>
</div>

我如何定位 p 元素，基于它的兄弟元素具有文本 The Important Label。

我遇到了类似的事情

$('.root').find('.foo > .foo-child > span:contains("The Important Label")')

这成功地让我得到了span 元素。但是现在我如何在兄弟 div 中获取 p 元素？有没有办法告诉找到哪个父母得到兄弟姐妹？

【参考方案1】：

$('.root').find('.foo:has(> .foo-child > span:contains("The Important Label")) + div > p')

aaa:has(bbb) 检查是否有任何匹配aaa bbb，然后才匹配aaa + 匹配先前匹配元素的以下兄弟

（根据您的用例，您可能对.foo:contains("The Important Label") + div > p...感到满意）