在不同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);