제이쿼리 태그(요소) 순서 변경하는 after(), insertAfter(), before(), insertBefore() 사용 방법

티스토리 댓글 시스템이 최근에 업데이트가 되면서 친효스킨도 최신 버전으로 업데이트를 할 수 밖에 없는 상황이었습니다. 문제는 댓글 리스트가 <li> 요소로 되어있는데 고정댓글이며 이전글 더보기 항목이 모두 동일한 <li>태그에 포함되어 있는 것이었습니다. 이렇게되면 서로 구별지어 CSS 스타일을 만들기가 상당히 애매합니다. 특히나 저는 최신 댓글을 가장 위로 오게 만들고 싶은데 그렇게되면 고정 댓글이 맨 하단으로 내려가버리는 불상사가 벌어지는 것이었습니다. 따라서 저는 이것을 다시 위로 올리고 싶었습니다. 그러려면 역시 제이쿼리로 할 수 밖에 없겠다는 생각이 들었죠. 제이쿼리에서 태그 순서를 변경하는 매소드로는 제목에도 언급했듯 다음의 옵션들이 있습니다.

 

사용 방법

$('타겟').after$(('선택자')) : 타겟을 선택자 다음에 추가함

$('선택자').insertAfter$(('타겟')) : 선택자를 타겟 다음에 추가함

$('타겟').before$(('선택자')) : 타겟을 선택자 이전에 추가함

$('선택자').insertBefore('타겟') : 선택자를 타겟 이전에 추가함

 

이렇게 사용하면 됩니다. 그러면 예시를 살펴보시겠습니다.

 

예시 살펴보기

See the Pen jQuery after, insertAfter, before, insertBefore by rgy0409 (@rgy0409) on CodePen.

 

위의 예시에서는 가상 선택자를 사용해 li 요소의 처음과 마지막만을 선택자와 타겟으로 지정한 상태입니다. 이 점을 참고하시어 최종 결과가 어떻게 배치되었는지 보시면 쉽게 파악이 가능합니다.

 

ul.after의 상황을 보시면 첫번째 li가 타겟이 된 셈이고 선택자는 after 후에 마크업된 li의 마지막 요소입니다. 따라서 마지막 li 넘버인 5번이 1번 바로 다음에 위치하게 된 상황입니다. 그렇기에 1,5,2,3,4가 되었습니다.

 

ul.insertAfter의 상황을 보시면 첫번째 li가 선택자가 되었으며 이 선택자를 insertAfter 타겟에 의해 li의 가장 마지막 요소 다음에 배치되도록 설정된 상황입니다. 그렇기에 1번이 맨 하단으로 밀려난 상태가 되었습니다. 그래서 2,3,4,5,1이 되었습니다.

 

ul.before의 상황을 보시면 li의 첫번째 목록인 1번이 타겟이 되었고 before에 의해 선택된 li의 마지막 요소인 5번이 1번 이전으로 위치 변경이 진행된 상황입니다. 그래서 5,1,2,3,4가 된 것입니다.

 

ul.insertBefore의 상황을 보시면 li의 첫번째 요소가 선택이 되었고 insertBefore에 의해 li의 마지막 요소인 5번 이전으로 위치 변경이 진행된 상황입니다. 그렇기에 2,3,4,1,5가 된 것입니다.

 

선택자 외에 새로운 요소를 추가해도 됨

타겟과 선택자 외에 태그를 추가해도 됩니다. 예를 들어서 이런 경우입니다.

 

$('.after>li:nth-last-of-type(1)').insertAfter($('<li>6</li>'));

 

이 내용을 ul.after 에 추가한다면 어떤 결과가 나타날까요? 그렇습니다. 1,2,3,4,5,6이 될 겁니다. 선택되어진건 li 요소의 맨 마지막인 5번이고 이후에 <li>6</li> 이라는 새로운 요소를 추가하는 개념입니다. 따라서 HTML 에서 최종 상황은 li가 1부터 6까지 입력된 상태가 됩니다. 이해가 되셨는지 모르겠습니다요. 끝.