자바스크립트 제이쿼리 정렬..
본문
https://sir.kr/qa/230596?vpage=1
위 답변주신걸로 적용하면 .group갯수가 적을때는 잘 돼는데 .group들이 많아지면 제대로 정렬이 안됍니다.
왜그런건가요..ㅜㅜ 도움부탁드립니다.
<div id="group">
<div class="group">
<div class="info">
<p class="name">사과</p>
<p class="age">13</p>
</div>
</div>
<div class="group">
<div class="info">
<p class="name">고구마</p>
<p class="age">17</p>
</div>
</div>
<div class="group">
<div class="info">
<p class="name">바나나</p>
<p class="age">11</p>
</div>
</div>
<div class="group">
<div class="info">
<p class="name">오렌지</p>
<p class="age">19</p>
</div>
</div>
</div>
<script>
var $divs = $("div.group");
$(function() {
var OrderedDivs = $divs.sort(function(a, b) {
return $(a).find("p.name").text() > $(b).find("p.name").text();
});
$("#group").html(OrderedDivs);
});
</script>
위 코드에서 .group 이 많아지면 정렬이 안됍니다..
답변 1
제가 답 드린 코드가 조금 문제가 있어나 보네요.. 죄송합니다.
다른 방법의 코드를 찾아보았고, 이번에는 테스트도 해보았습니다.
새로 찾아본 코드로, 제가 테스트할 때는 갯수가 많아도 잘 되는 것 같은데.. 잘 되었으면 좋겠습니다.
참조한 페이지입니다. * https://j11y.io/snippets/sorting-elements-with-jquery/
코드입니다.
<script>
jQuery.fn.sortElements = (function(){
var sort = [].sort;
return function(comparator, getSortable) {
getSortable = getSortable || function(){return this;};
var placements = this.map(function(){
var sortElement = getSortable.call(this),
parentNode = sortElement.parentNode,
// Since the element itself will change position, we have
// to have some way of storing its original position in
// the DOM. The easiest way is to have a 'flag' node:
nextSibling = parentNode.insertBefore(
document.createTextNode(''),
sortElement.nextSibling
);
return function() {
if (parentNode === this) {
throw new Error(
"You can't sort elements if any one is a descendant of another."
);
}
// Insert before flag:
parentNode.insertBefore(this, nextSibling);
// Remove flag:
parentNode.removeChild(nextSibling);
};
});
return sort.call(this, comparator).each(function(i){
placements[i].call(getSortable.call(this));
});
};
})();
$(function() {
$('div.group').sortElements(function(a, b){
return $(a).find("p.name").text() > $(b).find("p.name").text() ? 1 : -1;
});
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
