eq()
例として使うhtml
<ul>
<li>赤</li>
<li>青</li>
<li>白</li>
<li>黒</li>
</ul>
白を取得する
var color = $('li').eq(2).text();
console.log(color);
// 白
解説
eq() は
- 複数あるHTML要素の中からインデックス番号を指定することで特定の要素だけを取得できます。
- 引数には、取得したいインデックス番号を入力します。
- HTML要素のインデックス番号は０番から始まります。
なので最初の要素のインデックス番号は０、2番目の要素のインデックス番号は１になります。 - 例の場合は、「白」を取りたかったので引数に2を入れました。
特定の要素の前に要素を追加
例として使うhtml
<ul>
<li>赤</li>
<li>青</li>
<li>黒</li>
</ul>
黒の上に白を追加する
$('li').eq(2).before('<li>白</li>');
追加後のhtml
<ul>
<li>赤</li>
<li>青</li>
<li>白</li>
<li>黒</li>
</ul>
解説
黒の上に追加したいので eq() の引数には「2」を指定します。
before() は指定した要素の直前に要素を追加します。
before() の引数には追加したい要素を指定します。例の場合は、 <li>白</li>です。
特定の要素の後に要素を追加
例として使うhtml
<ul>
<li>赤</li>
<li>青</li>
<li>黒</li>
</ul>
青の下に白を追加する
$('li').eq(1).after('<li>白</li>');
追加後のhtml
<ul>
<li>赤</li>
<li>青</li>
<li>白</li>
<li>黒</li>
</ul>
解説
青の下に追加したいので eq() の引数には「1」を指定します。
after() は指定した要素の直後に要素を追加します。
before() の引数には追加したい要素を指定します。例の場合は、 <li>白</li>です。