Question

下面的表是循环的，所以我不能依赖于唯一的id，我必须遍历DOM来获取项目。我想在单击CHECK按钮时报告我的ajax调用的结果。

<table cellpadding="3" class="tablesorter" id="table_id">
<tr>
<td><input name="systemname" type="text" id="systemname" class="systemname" value="#rsRequestSystems.systemname#" size="50" maxlength="50">
<div class="SystemNameStatus" id="SystemNameStatus" style="color:##0000FF"></div></td>
<th class="form"><label>Location</label></th>
<td align="center"><button type="button" id="removeButton" class="fg-button ui-state-default ui-corner-all remove_SystemName" style="width:70px;">Remove</button>
<button type="button" id="checkButton" class="fg-button ui-state-default ui-corner-all check_SystemName" style="width:70px;">Check</button></td>
</tr>
</table>

下面是我的jQuery语句;现在，我只是想对一些文本进行硬编码，但理想情况下，我将从ajax结果返回一些文本来填充SystemNameStatus div。我似乎无法隔离DIV。尽管我查看了jQuery示例，但我还是不习惯遍历DOM。

$(".check_SystemName").live("click", function(){
  var thisClicked = $(this);
  thisClicked.parent().children('.SystemNameStatus').text('found it');
});

Answer 1

根据定义，

ID应该是唯一的。如果不是，那么当浏览器运行getElementById（这是jQuery幕后操作）时，您将获得关于哪个元素的所有投注都是关闭的。

如果您需要多个元素来共享相同的样式或出于其他原因被视为组的一部分，那么您应该使用类，然后将唯一ID提供给您实际想要选择的元素。

Answer 2

你在这里遇到问题。 id属性必须是唯一的。如果不是，则表示您没有有效的DOM，所有投注均已关闭。您当然不能依赖标准框架的行为，因为他们期望DOM遵循某些规则......例如id是唯一的。

Answer 3

Dancrumb是对的。下面的代码仍然有效，但我无法有目的地复制ID。

$(".check_SystemName").live("click", function(){
var thisClicked = $(this);
thisClicked.closest("tr").find('.SystemNameStatus').text('found it');
});

一旦你修复了你的id，或者只是因为它们被破坏而被删除它们并且不能在JavaScript中被信任，这就是我的小改动所做的。你很接近，.parent（）只在Dom上面一层，特别是<td>。如果你在一个嵌套表中，那么.parents（“tr”）可能会找到一堆<tr> s。 .closest（“tr”）在dom中找到最接近的父级。最初的.children（）调用仅深入一层，再次到<td> s。 .find（“”）将继续沿着后代继续。

遍历DOM以查找ID不唯一的特定DIV标记

3 个答案: