勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScript / jQueryで〇番目、最初、最後の要素を指定する方法

  jQuery JavaScript

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()

https://api.jquery.com/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

 - jQuery JavaScript

  関連記事

formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...

Lightboxで画像拡大時に閉じるボタンの位置を右上に変更

Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...

jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...

YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法

以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...

jQueryで画像を遅延ロードする「jquery.lazyload.js」の利用方法

画像を遅延ロードさせたい時にはjQueryプラグインのlazyloadが便利。以 ...