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>
--------------------------------------------------
'JS(JQuery)' 카테고리의 다른 글
javascript 특정 문자 사이의 문자열 추출하기(유튜브 영상 id 가져오기) 문자열 자르기 (indexOf, substr, substring, slice) (0) | 2023.11.24 |
---|---|
jquery 팝업창을 화면 가운데 띄우기(윈도우의 중앙에 배치하기) (0) | 2023.11.02 |
jquery 제이쿼리 반응형 화면 사이즈 변하면 새로고침 (0) | 2023.10.26 |
jquery 제이쿼리 애니메이션 무한반복 만드는 법 Maximum call stack size exceeded 에러해결, 콜백함수, setInterval (1) | 2023.10.26 |
jquery 반응형 화면 사이즈 새로 측정하기. 미디어쿼리 구간과 오차 없애기 (0) | 2023.10.22 |