jQuery .after()을 이용한 태그 순서 변경

시작하며

클론 코딩을 하던 중, 데스크탑 환경과 모바일 환경에서 엘리먼트의 순서가 변경되는 부분이 있어서 jQuery를 통해 태그 순서를 변경해주기로 했다.

$(A).after(B);
// B를 A 뒤로 이동하여 삽입한다.
$(A).inserAfter(B);
// A를 B 뒤로 이동하여 삽입한다.

after와 insertAfter는 같은 기능이지만 이동하는 순서가 다르다. 잘 구분해서 사용하자!

문제발견

위 스크립트를 이용하여 변경 코드를 작성하다 문제를 발견했다.

x 버튼의 순서를 변경하려고 했는데 x 버튼이 3개나 늘어나서 이동하는 것이다. 작성한 코드는 다음과 같다.

$(".product_name").after($(".products_lst_area li button"));

원인은?

x 버튼을 감싸고 있는 부모의 length 만큼 버튼이 추가가 되고 있음을 발견! x버튼을 감싸고 있는 li 태그가 3개 존재하고, 그에 따라 ul 안의 x 버튼도 토탈 3개 존재하고 있는데 그것을 전부 인식 후 삽입하고 있는 것 같았다.

해결!👏

$(".products_lst_area li  button").each(function(index,item){
  $(".product_name").eq(index).after($(".products_lst_area li button").eq(index));
});

each 반복문을 통해 특정 인덱스의 버튼이 동일한 인덱스를 가지는 요소 뒤에 올 수 있도록 코드를 수정해주었다.

아름답게 잘 구현 된 모습...! 👏