Jquery 选择器：如何选择元素答案

【问题标题】：Jquery selector: how to select the elementJquery 选择器：如何选择元素
【发布时间】：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 中做到这一点。

【问题讨论】：

标签： jquery jquery-selectors

【解决方案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 &gt; 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>

【讨论】：