問題 × 解決策

jQueryの「eq()」で、〇番目の要素に処理を行う

問題

jQueryで〇番目の要素に処理を行うには?

解決策

jQueryの「eq()」を使用する。

特定の順番の要素を指定する。

〇番目の要素に処理を行うという機会はよくあるのではないでしょうか。
今回はjQueryで特定の順番の要素を指定して処理を行う方法をご紹介します。

jQueryの「eq()」

jQueryで特定の順番の要素を指定して処理を行うには、以下の記述を行います。

$('要素のセレクタ').eq(順番の番号);

実際の「eq()」の使用例

実際の「eq()」の使用例です。
リストのなかで、3番目のliタグのCSSを操作し、太字に処理します。

HTML

<ul class="jqeq-list">
	<li>リスト</li>
	<li>リスト</li>
	<li">リスト</li>
	<li>リスト</li>
	<li>リスト</li>
</ul>
<p class="jqindex-num">ターゲットは <span class="nums"></span> 番目です。</p>

CSS

.jqeq-list > li{
	margin-left: 20px;
	list-style: disc;
}

javascript

if($(".jqeq-list").length){
    $(".jqeq-list > li").eq(2).css({ "font-weight": "bold" });
}

DEMOはこちら

  • リスト
  • リスト
  • リスト
  • リスト
  • リスト

ここに注意!

「eq()」は、「0、1、2…」という形式で0からカウントしていきます。
なので1番目が0となるので、注意が必要です。

参考ページ

【eq(position) – jQuery 日本語リファレンス】
http://semooh.jp/jquery/api/core/eq/position/

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

4 + three =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧