[jQuery] 順序を逆順にする（.reverse）

投稿日：2017年7月11日更新日：2018年4月28日

要素の順序を逆順にするには、.reverse()を使用します。

サンプルソース

例）ボタンを押すと、リストの並びを逆順にして出力する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  $('#btn1').click(function(){
    //そのままの順序で出力する
    $('#ts1 li').each(function(i){
      console.log($(this).text());
    });

    //逆順で出力する
    $($("#ts1 li").get().reverse()).each(function(){
      console.log($(this).text());
    });
  });
});

</script>
</head>
<body>
<input type="button" id="btn1" value="ボタン">
<ul id="ts1">
  <li>AA</li>
  <li>BB</li>
  <li>CC</li>
  <li>DD</li>
  <li>EE</li>
</ul>
</body>
</html>

<!DOCTYPE html>

<head>

$(function(){

$('#btn1').click(function(){

//そのままの順序で出力する

$('#ts1 li').each(function(i){

console.log($(this).text());

});

//逆順で出力する

$($("#ts1 li").get().reverse()).each(function(){

console.log($(this).text());

});

</script>

</head>

<body>

</ul>

</body>

</html>

（結果）: AA BB CC DD EE EE DD CC BB BB

執筆者：とら