使用jQuery查找特定元素

Question

我有以下标记。

<h6>Brand</h6>

<ul>
    <li>Orange</li>
    <li>Black</li>
    <li>Green</li>
</ul>

<h6>Colour</h6>

<ul>
    <li>Green</li>
    <li>Blue</li>
    <li>Black</li>
    <li>Orange</li>
</ul>

我无法改变或在这个标记中添加物理元素，因此尝试使用jQuery进行操作。

我想要实现的目标是将单词Black更改为Purple。但是只更改包含“颜色”的H6之后出现的单词Black。

到目前为止，我有：

$("h6:contains('Colour'):.jqueryCheck:contains('Black')").html("Purple");

这不起作用...为什么？

- user1124378

Answer 1

$("h6:contains('Colour')").next('ul').children("li:contains('Black')").html("Purple");

或者作为一个选择器字符串:

$("h6:contains('Colour') + ul li:contains('Black')").html("Purple");

- gen_Eric

Answer 2

尝试使用相邻选择器：

$("h6:contains('Colour')+ ul li:contains('Black')").text('Purple');

请查看此 演示。

- Rafay

---

这将改变两个 li，他只想要 <h6>颜色</h6> 后面的那一个。 - gen_Eric

是的，這就是我之前所擁有的，我只想更改 Colour 包含的 H6 下的一個實例。不過還是謝謝你花時間幫我。 - user1124378

@Rocket 谢谢指出这个问题，我已经修复了。为什么有些人这么渴望发现缺陷呢？ - Rafay

Answer 3

您可以使用类似以下的内容：

您可以像这样使用：

$("h6:contains('Colour')").next().find("li:contains('Black')").text('Purple');​

这会找到包含“Colour”的适当的<h6>，然后前进到下一个兄弟节点（即<ul>标记），在该<ul>内，它找到包含“Black”的<li>并将其更改为“Purple”。您可以在此处查看其工作原理：http://jsfiddle.net/jfriend00/rdSzC/

- jfriend00

Answer 4

$('h6:contains("Colour")').next('ul').children('li:contains("Black")').text("Purple");

Fiddle

- shaunsantacruz