jQuery~上級編~

プログラミングの勉強日記

2020年5月31日　Progate Lv.80

jQueryオブジェクトの構造

　jQueryオブジェクトは配列のような構造をしていて、セレクタに合致した要素が配列のように入っている。インデックス番号が割り振られている。

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

$('li')
=>[
  <li>HTML</li>  //インデックス番号0
  <li>CSS</li>   //インデックス番号1
]

eqメソッド

　jQueryオブジェクトの中からeqの引数の数字と同じインデックス番号の要素を取得できる。インデックス番号は0からはじまる

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>jQuery</li>
</ul>

$('li')の中のインデックス番号が2のjQueryオブジェクト(3つ目のli要素)

$('li').eq(2).css('color','red');

indexメソッド

　特定のインデックス番号を取得することができる。

<ul>
  <li>HTML</li>
  <li class="active">CSS</li>
  <li>jQuery</li>
</ul>

$('li').index($('.active));

li要素における.active要素のインデックス番号（1）を取得する。

prevメソッドとnextメソッド

　prevメソッドはjQueryオブジェクトの兄弟要素（同じ階層の要素）の中から1つ前の要素を、nextメソッドは1つ後ろの要素を取得することができる。

<ul>
  <li>HTML</li>
  <li id="center">CSS</li>
  <li>jQuery</li>
</ul>

$('center').prev().css('color','red');
$('center').next().css('color','blue');