Encontrar elementos específicos con jQuery

Question

Tengo el siguiente marcado.

<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> 

No puedo cambiar ni agregar físicamente en este marcado, por lo que trato de manipular con jQuery.

Lo que quiero lograr con esto es poder cambiar la palabra Black al Purple. Pero sólo la palabra Black que aparece después de la H6 que contiene "color"

tengo esto hasta ahora:

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

Sin embargo, esto no funciona ... ¿Por qué no?

Answer 1

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

O toda cadena como un selector:

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

Answer 2

intente utilizar el adjacent selector:

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

ver este DEMO.

Answer 3

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

Fiddle

Answer 4

Puede usar algo como esto:

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

Esto encuentra la adecuada <h6> que contiene "Colour", luego avanza al siguiente hermano (que es la etiqueta <ul>, luego dentro de ese <ul>, encuentra un <li> que contiene "Black" y cambia ese texto a "Purple".

Se puede ver que funcione aquí: http://jsfiddle.net/jfriend00/rdSzC/