Jquery 选择器：如何选择元素

Posted 2023-05-09

【中文标题】Jquery 选择器：如何选择元素

【英文标题】：Jquery selector: how to select the element

【发布时间】：2019-05-21 23:38:21

【问题描述】：

<h2>
 <a href="exmpale">repeatedtext</a>
</h2>
<p>
</p>
<p> required things    </p>   <--- select this element

我有上面的html序列。唯一的线索是带有文本链接“repeatedtext”的h2

我想选择所有显示为“选择这个元素”的元素，它在 h2 之后是 p

如何在 jquery 中做到这一点。

【参考方案1】：

你可以使用h2:contains(repeatedtext) + p + p作为选择器

$('h2:contains(repeatedtext) + p + p').css('color', 'green');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>
 <a href="exmpale">repeatedtext</a>
</h2>
<p>
</p>
<p> required things    </p>   
<h2>
 <a href="exmpale">not repeated</a>
</h2>
<p>
</p>
<p> not required things    </p>   
<h2>
 <a href="exmpale">repeatedtext</a>
</h2>
<p>
</p>
<p> required things    </p>   

【讨论】：

h2 带有包含重复文本的链接。因为重复的文本可能包含在元素之外

我不明白你的评论

@Santhosh Yedidi：这根本不是您最初的问题所暗示的。一切都指向 inside a 元素的文本。

【参考方案2】：

使用:contains()选择器选择具有特殊文本的元素并使用.next()选择下一个p元素

$("h2 > a:contains('repeatedtext')").parent().next("p").next().css("color", "red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>
 <a href="exmpale">repeatedtext</a>
</h2>
<p>text</p>
<p>required things</p>