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

尝试使用adjacent selector：

$("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>内，找到{ {1}}包含<li>并将该文字更改为"Black"。

您可以在此处查看：http://jsfiddle.net/jfriend00/rdSzC/

Answer 4

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

Fiddle

使用jQuery查找特定元素

4 个答案: