Question

我有一些像这样的td

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

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

如何使用JQuery或Javascript实现此目的？

Answer 1

的jQuery

如果您点击最后一个单元格，这将提醒'undefined'。

jsFiddle

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

的JavaScript

这个方法有点hacky，因为.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(）两次。你将不得不检查下一个是否带来了一个元素，然后你不会得到第二个，最后你不会得到第一个和第二个下一个元素。

<强> Live Demo

$('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);
});

点击a查找下一个ID

4 个答案:

的jQuery

的JavaScript