javascript - 在不同的 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>

那么为 person 1 选择名字的 jquery 将是

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

fiddle 示例:http://jsfiddle.net/zSqjV/1/

否则，如果您不想更改 HTML 并且您知道名称将始终是 div 中的第一个 span 而性别将始终是 div 中的最后一个 span，您可以使用此:

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