jQueryで$(要素).text()だと意図しない値を取得する可能性あり

$(要素).text()で取得すると…

最近はVueやReactを使用しているWebサイトが多いが、古いWebサイトだとjQueryを使用していることもめずらしくない。

jQueryはdocument.getElementById()やdocument.querySelector()のような長い記述ではなく$(要素)でよいので楽だが$(要素).text()を使用すると予期せぬバグが発生することがある。

例えば<div class="num">1</div>から値を取得する際はdocument.querySelector()の場合はdocument.querySelector('.num').textContent、jQueryの場合は$('.num').text()となる。

ここで突然ですが問題です。

document.querySelector('.num').textContentで取得すると1なのに$('.num').text()で取得すると11で取得してしまうことがある。それはなぜか?

querySelectorで取得したサンプル

$('.num').text()で取得すると11で取得するサンプル

正解は…

クリックで正解を開く

非表示で<div class="num" hidden>1</div>となっている箇所があり、そこからも取得してしまったため「'1' + '1'」で '11' になってしまった。

最近は要素を表示領域外や非表示にして見えなくしているWebサイトが多いので、jQueryを使用していると意図せずこれが原因で表示内容がおかしくなっていることがある。

こうならないために特定の1箇所から値を取得する際はclassではなくidを付けて取得するか、どうしてもclassから取得するなら$('.num').eq(0).text()で指定するのが望ましい。

idだと複数箇所にあったとしても$('#num')は最初の要素の値しか取得しません。

$('.num').eq(0).text()で取得するサンプル