javascript - をクリックして次の ID を調べる

Question

私はこのようないくつかのTDを持っています

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

1 つの td をクリックして、次の 2 つの td の ID を知りたい。「最初」をクリックすると、「2 番目」と「3 番目」の値を取得する必要があります。

JQueryまたはJavascriptを使用してこれを達成するにはどうすればよいですか?

Answer 1

jQuery

最後のセルをクリックすると、「未定義」と警告されます。

jsフィドル

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

JavaScript

id.nextSibling は、プロパティを含まないテキスト ノード オブジェクト (ノードではない) を返すため、このメソッドは少しハックです。から兄弟のリストparentNodeを取得し、一致するまで反復します。次のインデックスは次の兄弟です。

jsフィドル

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

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

Answer 3

JQuery には、これに使用できる兄弟セレクターと関数があります。

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

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

Answer 4

) を 2 回使用できますnext(。next が要素を持ってきたかどうかを確認する必要があります。最後から 2 番目の要素は 2 番目に取得されず、最後は 1 番目と 2 番目の次の要素が取得されません。

ライブデモ

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