在不同div中選擇名稱相似的元素？

Question

說我在我的頁面下面的div：

<div id="person_1"> 
    Name: <span>Bob</span> <br> 
    Gender: <span>Male</span> 
</div> 

<div id="person_2"> 
    Name: <span>Sally</span> <br> 
    Gender: <span>Female</span> 
</div> 

如果我想更新的名稱或1人的性別，我想不出什麼辦法來選擇範圍，除非我改變了跨越到：

<span id="person_1_name">Bob</span> 
<span id="person_1_gender">Male</span> 

和：

<span id="person_2_name">Sally</span> 
<span id="person_2_gender">Female</span> 

然後我可以這樣做：$("#person_1_name").html(bob.newName);。但是，這非常醜陋，而不是我的偏好。

有沒有辦法做這樣的事情？

$("#person_1 name").html(bob.newName); 
$("#person_1 age").html(bob.newAge); 

$("#person_2 name").html(sally.newName); 
$("#person_2 age").html(sally.newAge); 

Answer 1

爲什麼不使用：

<div id="person_1"> 
    Name: <span class="name">Bob</span> <br> 
    Gender: <span class="gender">Male</span> 
</div> 

然後針對人1選擇名稱jquery的是

$('#person_1 .name').text(); 

小提琴例如：http://jsfiddle.net/zSqjV/1/

否則，如果你不想改變HTML和你知道w ^這個名字將永遠是在div第一跨度和性別總是會在div的最後一個跨度，您可以使用此：

var person1_name = $('#person_1 span:first').text(); 
var person1_gender = $('#person_1 span:last').text(); 

Answer 2

您可以使用類來確定您的span元素，像這樣：

<div id="person_1"> 
    Name: <span class="name">Bob</span> <br> 
    Gender: <span class="gender">Male</span> 
    Age: <span class="age">25</span> 
</div> 

<div id="person_2"> 
    Name: <span class="name">Sally</span> <br> 
    Gender: <span class="gender">Female</span> 
    Age: <span class="age">21</span> 
</div> 

然後你這樣的代碼：

$("#person_1 .name").html(bob.newName); 
$("#person_1 .age").html(bob.newAge); 

$("#person_2 .name").html(sally.newName); 
$("#person_2 .age").html(sally.newAge); 

或者，你可以改變你的<span>標籤<name>或<age>噸但這不符合HTML標準，現在或將來您可能會遇到各種各樣的跨瀏覽器問題，所以我不會推薦它。

Answer 3

您也可以執行以下操作，而不是使用類

$("#person_1 > span:first").text(newname); 
$("#person_1 > span:last").text(newage);