jQueryオブジェクトに対してのnext()とtagNameの処理の仕方

###実現したいこと
次の要素のtagNameを取得したいのですがunderfinedになったりtypeErrerになったりしてできません。
###わからないこと
jQueryオブジェクトがどうなっているのかわかりません。配列なのか単体なのかということです。以下のコードを見てください。

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <title>お試し</title>
6    </head>
7    <body>
8        <p id="a"></p>
9        <p id="b"></p>
10        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
11        <script src="index.js"></script>
12    </body>
13</html>

javascript
1console.log($('p#a').tagName);           // underfined
2console.log($('p#a')[0].tagName);        // P
3console.log($('p#a').next().tagName);    // underfined
4console.log($('p#a')[0].next().tagName); // TypeError: $(...)[0].next is not a function

これらのコードで、jqueryのセレクタ指定はたとえidでも配列が構成されるということが分かったのですが、next()メソッドを入れてtagNameを参照しても上記のようにしかなりません

行動規範の内容に同意します

回答1件

ベストアンサー

$('p#a').next()は、$('p#a')の全結果ノードの次の要素を列挙します。そのため、$('p#a').next()[0].tagNameとすれば目的の値は取れるでしょう。
なお、$('p#a')[0]は、document.getElementById("a")と同じになりますので、document.getElementById("a").next()となり、next関数が無いと怒られます。
DOMオブジェクトとJQUeryオブジェクトはいつの間にか入れ替わっていたりするので、慣れないうちはオブジェクト自体をconsole出力するといいと思います。

例えば・・・

$('p.test'); // これはaとc
$('p.test').next(); // これはbとd
$('p.test').next().prev(); // これはaとc($('p.test')と一緒)
$('p.test')[0]; // これはdocument.getElementById("a")と一緒
$('p.test')[1]; // これはdocument.getElementById("c")と一緒
$('p.test').next()[0] // これはdocument.getElementById("b")と一緒
$('p.test').next()[1] // これはdocument.getElementById("d")と一緒

// ...

<p id="a" class="test"></p>
<p id="b"></p>
<p id="c" class="test"></p>
<p id="d"></p>

投稿2019/08/15 09:44

編集2019/08/15 09:54