使用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.但只有包含"颜色" Black后出现的单词H6

到目前为止我有这个:

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

然而,这不起作用......为什么不呢？

Answer 1

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

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

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

Answer 2

尝试使用相邻的选择器:

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

看这个DEMO.

Answer 3

你可以使用这样的东西:

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

这会找到<h6>包含的相应内容"Colour",然后前进到下一个兄弟(这是<ul>标记,然后在其中<ul>,它会找到<li>包含"Black"并更改该文本的内容)"Purple".

你可以在这里看到它的工作:http://jsfiddle.net/jfriend00/rdSzC/