jQueryのprevAllメソッドを使う際の注意

兄弟要素のうち、指定要素より前の要素をすべて取得するprevAllメソッド。仕様を少し勘違いしていたのでここにメモしておきます。

例えば、下記のようなHTMLがあったとします。

<ul>
  <li id="li_a">あ</li>
  <li id="li_i">い</li>
  <li id="li_u">う</li>
  <li id="li_e">え</li>
  <li id="li_o">お</li>
</ul>

この状態でJavaScriptを下記のように記述します。

console.log($('#li_e').prevAll().eq(0).text());

上記の記述は、IDがli_e、つまり『え』と書かれた要素より前の兄弟要素を全て取得し、その一つ目(eq(0))の要素内のテキストをコンソールに出力という指定です。

ここで問題です。コンソールにはどういう文字が出力されるでしょう。自分はこういう記述の場合、『あ』となるだろうと思ってました。

正解は『う』です。ちなみに、eq(1)とすると『い』と出力されます。prevAllで取得した要素は実際の順序とは逆になってしまうんですね。確かに直前の要素が一つ目というのはある意味便利かもしれませんが、ちょっと予想外の動きでした。