在不同的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并且您知道该名称将始终是div中的第一个范围,并且性别将始终是div中的最后一个范围,您可以使用:

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