勉強したことのメモ

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

jQueryでHTMLの特定要素をループ時に逆順で処理する方法

  jQuery JavaScript

jQueryでリスト(li)タグ等の特定要素をeach()でループ処理する場合、当然ながら上から下の順に処理される。これを逆順として下から上の順に処理したい。以下に対応方法をメモ。

 

対応方法

ソースコード

<ul id="list">
    <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>
//1->5の順に出力
$(`#list li`).each(function(index, value){
    console.log($(this).html());
});

//5->1の順に出力
$($(`#list li`).get().reverse()).each(function(index, value){
    console.log($(this).html());
});
</script>

解説等

get()で一旦配列化し、その配列をreverse()で逆順に並び替えたものをeach()でループ処理するという内容になる。

 

リファレンス

get()

https://api.jquery.com/get/

reverse()

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse

 - jQuery JavaScript

  関連記事

画像の登録フォームにてjQueryプラグイン(piCEdit)を用いてWebカメラの映像を撮影させる方法

form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...

SNSのシェア(いいね)ボタンを設置できるjQueryプラグイン「jsSocials」の利用方法

サイト内にSNSのシェア(いいね)ボタンを設置する際、WordPressだと何ら ...

jQueryで偶数or奇数行に任意のClassを付与する方法

tableタグの1行目を除く偶数もしくは奇数行のtrタグに任意にClassを指定 ...

Javascript / jQueryにて特定の要素内の文字数が〇文字以上の場合に丸める方法

サイトの特定の要素内の文字数が〇文字以上の場合に「コンテンツコンテ……」のように ...

jQueryでimgタグのsrcを変える

やりたかった事はイベントに応じてimgタグの src内のURLを変更。attrを ...