jquery .sort() 요소 이동하면서 제이쿼리 소트 정렬하기

✈ jquery .sort()를 활용한 요소 이동과 소트 정렬

안녕하세요! 이번 포스팅에서는 jQuery의 .sort() 함수를 활용하여 요소를 이동하고 동시에 소트 정렬하는 방법에 대해 알아보겠습니다. 이 기술은 부서나 트리구조의 목록에서 항목을 다른 위치로 이동하면서 정렬을 유지하고자 할 때 유용하게 활용될 수 있습니다. 이해를 돕기 위해 간단한 예시와 함께 코드를 살펴보겠습니다.

예시: 부서 이동과 소트 정렬

제시된 예시에서는 '부서목록'과 '선택된 부서'라는 두 개의 그룹이 있습니다. 이 그룹들은 UL과 LI 요소를 사용하여 구성되어 있습니다. 각 부서는 데이터 속성 data-sid를 통해 식별됩니다. 사용자가 '부서목록'의 부서를 선택하면 해당 부서가 '선택된 부서'로 이동하게 되며, 이동된 후에는 부서들이 순서대로 소팅 정렬됩니다.

코드 예시

먼저, HTML 코드를 살펴보겠습니다.

<div class="sectionWrap">
  <div class="choiceGroup ">
    <!-- ... -->
    <div class="scrollHere choiceGroup1">
      <ul>
        <!-- 부서 목록 -->
      </ul>
    </div>
  </div>
  <div class="toRightArr"></div>
  <div class="choiceGroup">
    <!-- ... -->
    <div class="scrollHere choiceGroup2">
      <ul>
        <!-- 선택된 부서 -->
      </ul>
    </div>
  </div>
</div>

그리고 JavaScript 코드는 다음과 같습니다.

$(document).ready(function () {
  $(document).on('click', '.choiceGroup1>ul>li', function () {
    $(this).appendTo('.choiceGroup2>ul');
    sortLi('.choiceGroup2');
  });

  $(document).on('click', '.choiceGroup2>ul>li', function () {
    $(this).appendTo('.choiceGroup1>ul');
    sortLi('.choiceGroup1');
  });

  function sortLi(e) {
    $(e + '>ul>li').sort(function (a, b) {
      return parseInt(a.dataset.sid) - parseInt(b.dataset.sid);
    }).appendTo(e + '>ul');
  }
});

CSS 스타일링

CSS 스타일링은 다음과 같이 정의되어 있습니다.

/* ... */
.sectionWrap {
  /* ... */
}

.choiceGroup1>ul>li>a {
  /* ... */
}

.choiceGroup2>ul>li>a {
  /* ... */
}

.choiceGroup {
  /* ... */
}

.toRightArr {
  /* ... */
}

결론

이렇게 jQuery의 .sort() 함수와 .appendTo() 함수를 활용하여 부서를 이동하면서 정렬하는 방법을 구현해보았습니다. 이 예시를 통해 복잡한 데이터 구조에서도 원하는 항목을 선택적으로 이동하고 동시에 소팅 정렬을 유지하는 방법을 배워보았습니다. 이 기술을 응용하여 다양한 상황에서 유용하게 활용해보시기 바랍니다.

주요 포인트 요약

• jQuery의 .sort() 함수를 활용하여 요소를 소팅 정렬할 수 있습니다.
• .appendTo() 함수를 사용하여 요소를 다른 위치로 이동시킬 수 있습니다.
• 데이터 속성을 활용하여 각 항목을 식별하고 정렬하는 기능을 구현할 수 있습니다.

감사합니다!

---