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

Answer 2

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

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

Answer 3

您可以使用类来标识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标准，您现在可能遇到各种跨浏览器问题或在将来，所以我不推荐它。

在不同的div中选择类似命名的元素？

3 个答案: