访问下一个同级

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' />

首先，我想选择标题为“ title”的每个TR标签，然后首先选择该特定TR标签的同级标签（即，下一个ID为“ map_xxxx”的TR）。

我有这样的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同级。alert（）提供[object Text]。

我在这里做错了什么？

Answer 1

尝试这样：

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

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

Answer 2

我认为您可以简单地使用next ：

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

顺便说一句， <tr>应该具有结束标签（即</tr> ），并且内部还应包含指定数量的<td></td>标签。

Answer 3

您的问题是每对<tr>元素之间的空白都表示为DOM中的文本节点。 但是，表相关元素的属性似乎鲜为人知，这使得处理此问题变得非常容易。 特别是在这种情况下， <table>元素的rows属性和<tr>元素的rowIndex属性。 假设您有一个<tr>元素存储在名为tr的变量中，那么您所需tr就是：

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

该功能适用​​于IE 4以上的所有主要浏览器，并且是DOM标准的一部分。 它也比使用jQuery或其他库更快，更兼容。

Answer 4

好，我应该用

var firstTRSibling=obj.nextSibling.nextSibling;

但为什么？_

Answer 5

由于您已经在使用jQuery，因此建议您使用jQuery内置的next函数。

可能像var lblTRs=$("tr[title=title]").next("tr");