ywork2020.com

Title

要素の順序を逆順にする

目次 (INDEX)

reverseとは

ここで説明するreverse とは次の語句からなるjQueryのメソッドです。
reverse
読み: リバース
意味: 逆

目次に戻る

reverseメソッドの概要

このメソッドは、要素配列を逆順で並べ替えます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。 

$(Selector).get().reverse();

目次に戻る

サンプルコードと実行結果

ここでは、li要素を題材にしました。 元あるリストを逆順に入れ替えてコピーを表示しています。

サンプルコード: CSS 
<style>
	.clsA, .clsB, .clsC{
		font-size: 1.5em;
	}
	.clsA{background-color: ##lightpink;}
	.clsB{background-color: ##lightgreen;}
	.clsC{background-color: ##lightblue;}
</style>
サンプルコード: HTML 
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<ul>
		<li class ="clsA">list A</li>
		<li class ="clsB">list B</li>
		<li class ="clsC">list C</li>
	</ul>
	<output><ul></ul></output>
</body>
  • 05-09: ul (アンオーダーリストです。番号無しのリストを表します。)
  • 06, 07, 08: li (リストです。各要素にはCSSで使用するためにclass属性を付けています。)
  • 10: output (jQueryの結果を表示するための要素です。この要素内のul要素の中に06, 07, 08行目の要素のコピーを逆順で挿入します。)
サンプルコード: script 
<script>
	$($("li").get().reverse()).each(function(){
		$("output ul").append($(this).clone());
	});
</script>
  • 02: get() (要素の配列を取得します。)
  • 02: reverse() (要素の配列を逆順します。)
  • 02: each() (逆順にした要素配列の各要素に関数を実行します。)
  • 03: append() (要素内の末尾にノードを追加します。)
  • 03: clone() (追加するのは逆順で取得した既存の要素のコピーです。)
実行結果:
  • list A
  • list B
  • list C

    目次に戻る