jQueryでHTMLの特定要素をループ時に逆順で処理する方法
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()
reverse()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
関連記事
-
-
「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法
「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...
-
-
SNSのシェア(いいね)ボタンを設置できるjQueryプラグイン「jsSocials」の利用方法
サイト内にSNSのシェア(いいね)ボタンを設置する際、WordPressだと何ら ...
-
-
jQueryでコンテンツのスライド
jQueryもしくはJavaScriptでリンクを押すと 右から左にコンテンツを ...
-
-
jQueryで対象の要素をまとめて親要素で囲む方法
あるシステムで出力されているHTMLタグを指定した親要素で囲みたいというケースが ...
-
-
jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方
divやspanなど指定した要素を簡単にフォーカスするjQueryプラグインがあ ...