Tìm các thành phần cụ thể với jQuery

Question

Tôi có đánh dấu sau.

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

Tôi không thể thay đổi hoặc bổ sung vật lý vào đánh dấu này, do đó, do đó cố gắng thao tác với jQuery.

Điều tôi muốn đạt được từ điều này là có thể thay đổi từ Black thành Purple. Nhưng chỉ từ Black xuất hiện sau khi H6 chứa "Color"

Tôi có điều này cho đến nay:

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

Tuy nhiên điều này không làm việc ... Tại sao không?

Answer 1

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

Hoặc tất cả các chuỗi như một selector:

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

Answer 2

Hãy thử sử dụng adjacent selector:

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

Xem này DEMO.

Answer 3

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

Fiddle

Answer 4

Bạn có thể sử dụng một cái gì đó như thế này:

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

này thấy thích hợp <h6> có chứa "Colour", sau đó chuyển sang người anh em tiếp theo (là thẻ <ul>, sau đó bên trong đó <ul>, nó tìm thấy một <li> có chứa "Black" và thay đổi văn bản đó thành "Purple".

Bạn có thể thấy nó hoạt động ở đây: http://jsfiddle.net/jfriend00/rdSzC/