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

您还可以执行以下操作而不是使用类

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

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

或者，您可以将 标记更改为 或 标签，但这不符合 HTML，并且您现在或将来可能会遇到各种跨浏览器问题，因此我不推荐它。

Answer 3

为什么不使用：

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

那么用于选择人员 1 的姓名的 jquery 将是

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

Fiddle 示例： http:// jsfiddle.net/zSqjV/1/

否则，如果您不想更改 HTML 并且您知道 name 始终是 div 中的第一个 span，gender 始终是最后一个 span在div中，你可以使用这个：

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