JavaScript / jQueryで〇番目、最初、最後の要素を指定する方法
jQueryでリストタグ(<li>)の〇番目、最初、最後の要素を指定し、何らかの処理を行いたい。また、せっかくなのでJavaScriptでも同じことができるように調べておきたい。以下に対応方法をメモ。
目次
対応方法
ソースコード
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> $(function(){ console.log($(`li`).eq(2).html()); //3 console.log($(`li:first`).html()); //1 console.log($(`li:last`).html()); //5 }); console.log(document.querySelector(`ul`).children[2].innerHTML); //3 console.log(document.querySelector(`ul`).firstElementChild.innerHTML); //1 console.log(document.querySelector(`ul`).lastElementChild.innerHTML); //5 </script>
jQueryのeq()やJavaScriptのchildren[]は0番目からカウントする点に注意。
リファレンス
.eq()
Element: children プロパティ
https://developer.mozilla.org/ja/docs/Web/API/Element/children
Element: firstElementChild プロパティ
https://developer.mozilla.org/ja/docs/Web/API/Element/firstElementChild
Element: lastElementChild プロパティ
https://developer.mozilla.org/ja/docs/Web/API/Element/lastElementChild
関連記事
-
-
セレクトメニューにサジェスト機能をつける方法(select2)
formのselectメニューで何文字が入力すると候補を絞って表示させるサジェス ...
-
-
Lightboxで画像拡大時に文字タイトルとリンクをつける
lightboxで画像をクリックして拡大した際に、文字タイトルとその文字にリンク ...
-
-
jQueryでUNIXタイムスタンプの取得
jQueryでUNIXタイムスタンプを取得したい場合、 $.now()だけで取得 ...
-
-
モーダルウィンドウ表示時にウィンドウのスクロール位置をリセットする方法
モーダルウィンドウ内で「縦にスクロール→ウィンドウを閉じる→改めてモーダルウィン ...
-
-
jQueryとCSSで指定したテキストに対してラインマーカーを引く方法
サイト内で強調したいテキストに対して蛍光ペンでマーカーを引くようなアニメーション ...