访问下一个兄弟

Question

我有一个HTML网页摘要如下：

<tr><td></br></td></tr> 
<tr title="title"><td></td><td>凝固検査専用容器</td></tr> 
<tr id='map_6011' /> 
<tr id='map_6012' /> 
<tr id='map_6010' /> 
<tr id='map_6184' /> 
<tr id='map_6336' />  
<tr><td></br></td></tr> 

<tr title="title"><td></td><td>血糖専用容器(NaF入り)</td></tr> 
<tr id='map_2055' /> 
<tr id='map_3471' />  
<tr><td></br></td></tr> 

<tr title="title"><td></td><td>ｱﾝﾓﾆｱ専用容器</td></tr> 
<tr id='map_2142' /> 

首先，我要选择标题为“标题”每个TR标签，并特别TR标签，然后第一个兄弟（即下一个。 TR的ID为'map_xxxx'）。

我有我的JavaScript是这样的：

var lblTRs=$("tr[title=title]"); 
for(var i=0;i<lblTRs.length;i++){ 
    var obj=lblTRs[i]; 
    var firstTRSibling=obj.nextSibling; 
    alert(firstTRSibling); //this gives [object Text] 
} 

但它没有给出实际的TR sibling.The警报（）给出[对象文本。

我在这里做错了什么？

Answer 1

尝试是这样的：

var firstTRSibling; 
while((firstTRSibling=obj.nextSibling).nodeType !== 3){ 
               // ^-----indicates TEXT_NODE 
    obj=obj.nextSibling; 
} 
alert(firstTRSibling); 

你有DOM元素之间多余的空格字符，他们将视为文本节点。

Answer 2

好吧，我应该使用

var firstTRSibling=obj.nextSibling.nextSibling; 

但为什么_

Answer 3

我想你可以简单地使用next：

$("tr[title='title']").each(function() { 
    var element = $(this).next(); 
}); 

BTW，<tr>应该有结束标记（即</tr>），也包含内部的<td></td>标签指定的号码。

Answer 4

因为你已经在使用jQuery，我建议使用jQuery内置的next函数。

这可能是财产以后像var lblTRs=$("tr[title=title]").next("tr");

Answer 5

你的问题是，每对<tr>元件之间的空白空间被表示为DOM中的文本节点。但是，表格相关元素的表面上很少有人知道，因此很容易处理这个问题。具体而言，在这种情况下，<table>元素的rows属性和<tr>元素的rowIndex属性。假设你有存储在一个名为tr变量<tr>元素，你需要的是：

tr.parentNode.rows[tr.rowIndex + 1]; 

这适用于所有主要的浏览器回到IE 4，是DOM标准的一部分。它比使用jQuery或其他库更快，更兼容。