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>
- list A
- list B
- list C