Ricerca di elementi specifici con jQuery

Question

Ho il seguente markup.

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

io sono in grado di modificare o aggiungere fisicamente in questa marcatura, in modo quindi cercando di manipolare con jQuery.

Quello che voglio ottenere da questo è quello di essere in grado di cambiare la parola Black a Purple. Ma solo la parola Black che appare dopo il H6 contenente "Colore"

ho questo finora:

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

Questo però non funziona ... Perché no?

Answer 1

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

O tutti stringa come un selettore:

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

Answer 2

provare a utilizzare il adjacent selector:

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

Vai a questa DEMO.

Answer 3

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

Fiddle

Answer 4

Si può usare qualcosa di simile:

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

Ciò trova l'appropriato <h6> che contiene "Colour", quindi passa al prossimo fratello (che è il tag <ul>, quindi all'interno di quello <ul>, trova uno <li> che contiene "Black" e cambia il testo in "Purple".

Potete vedere il lavoro qui: http://jsfiddle.net/jfriend00/rdSzC/