Поиск конкретных элементов с помощью 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, содержащего «Color»

меня это до сих пор:

$("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

Try с помощью adjacent selector:

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

Смотрите эту DEMO.

Answer 3

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

Fiddle

Answer 4

Вы можете использовать что-то вроде этого:

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

Это находит соответствующий <h6>, содержащий "Colour", затем переходит к следующему брату (который является тегом <ul>, а затем внутри этого <ul>, он находит <li>, который содержит "Black" и обменивает его текстом на "Purple".

Вы можете увидеть его работы здесь: http://jsfiddle.net/jfriend00/rdSzC/