jquery 엘리먼트를 역순, 최신순 정렬하기. 선택자 preAll()

var reverse = $('정렬대상').prevAll();
$('정렬대상의 컨테이너').append(reverse);

 

preAll()은 대상 요소를 기준으로 이전 형제들을 모두 선택하는 선택자이다.
--------------------------------------------------
<ul>
    <li>1</li>
    <li>2</li>
    <li class="on">3</li>
</ul>
--------------------------------------------------
그래서 만약 위와같은 엘리먼트들이 있을 때,
$('.on').prevAll();
라고 하면,
<li>1</li>
<li>2</li>
를 불러온다.
--------------------------------------------------


그런데 이때 특정 엘리먼트를 선택하지 않고
$('li').prevAll();
라고 하면, 가장 마지막 순서로 발생한 결과값을 리턴한다.
--------------------------------------------------
<li>1</li> <!--1. 불러올 결과 값 없음-->
<li>2</li> <!--2. <li>1</li> 불러옴 -->
<li>3</li> <!--3. <li>2</li>, <li>1</li> 불러옴 -->


(개발자 도구로 확인해보면 prevObject로 마지막엘리먼트의 함수값이 표시되는 것을 알 수 있다. 
*object(객체) : jQuery 함수의 리턴값
*prevObject : 바로 전에 실행된 함수의 리턴값)

결과적으로  <li>2</li>, <li>1</li>이 불러와 진다.
--------------------------------------------------
그리고 이 결과값을 $('ul').append('불러온 값들'); 하게 되면,

불러온 <li>2</li>, <li>1</li>을 순서대로 ul의 자식중에 가장 뒤에 놓게 되고,
결과적으로 역순으로 정렬된다.
--------------------------------------------------
    <li class="on">3</li>
    <li>2</li>
    <li>1</li>
--------------------------------------------------