javascript - 通过单击查找下一个 ID

Question

我有一些像这样的td

<td id="first">first</td>
<td id="second">second</td>
<td id="third">third</td>
<td id="fourth">fourth</td> 

通过单击一个 td，我想找出其下两个 td 的 id。当我点击“第一”时，我需要获得“第二”和“第三”的值。

如何使用 JQuery 或 Javascript 实现这一点？

Answer 1

jQuery

如果您单击最后一个单元格，这将警告“未定义”。

jsFiddle

$('td').click(function () {
    alert($(this).next().attr('id'));
});

JavaScript

这个方法有点老套，因为 .nextSibling 返回一个不包含id属性的文本节点对象（不是节点）。它从它的 中获取兄弟姐妹列表parentNode，然后我们遍历它们直到我们得到匹配，下一个索引是下一个兄弟姐妹。

jsFiddle

var tds = document.getElementsByTagName('td');

for (var i = 0; i < tds.length; i++) {
    tds[i].onclick = function () {
        var siblings = this.parentNode.children;
        var i = 0;
        while (siblings[i] != this) { i++; }
        if (i < siblings.length)
            alert(siblings[i + 1].id);
    };
}

Answer 2

您可以使用next() 两次。您将不得不检查下一个是否带来了一个元素，因为倒数第二个您不会获得第二个，最后您不会获得第一个和第二个下一个元素。

现场演示

$('td').click(function () {
    first = $(this).next('td');
    second = first.next('td');
    if (first.length) alert(first.text() );
    else alert("No next");

    if (second.length) alert(second.text());
    else alert("No next");
});

Answer 3

JQuery 有兄弟选择器和函数，您可以使用它们：

http://api.jquery.com/next-siblings-selector/

http://api.jquery.com/siblings/

Answer 4

$('td').click(function(e) {
    e.preventDefault();
    var id = $(this).next().attr('id');
    if (id) alert(id);
});