자바스크립트/제이쿼리 가나다순 정렬 채택완료
bonobono
7년 전
조회 4,122
</p>
<p><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></p>
<p>
.name 값에 따라 .group 을 가나다 순으로 정렬하고 싶습니다.
아래는 정렬 후 입니다
</p>
<p><div id="group"></p>
<p> <div class="group">
<div class="info">
<p class="name">고구마</p>
<p class="age">17</p>
</div>
</div></p>
<p> <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">13</p>
</div>
</div>
<div class="group">
<div class="info">
<p class="name">오렌지</p>
<p class="age">19</p>
</div>
</div>
</div></p>
<p>
도움부탁드립니다..
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
마르스컴퍼니
Expert
7년 전
참조한 페이지들입니다.
https://stackoverflow.com/questions/6133723/sort-divs-in-jquery-based-on-attribute-data-sort" target="_blank">https://stackoverflow.com/questions/6133723/sort-divs-in-jquery-based-on-attribute-data-sort
https://jsfiddle.net/hibbard_eu/C2heg/" target="_blank">https://jsfiddle.net/hibbard_eu/C2heg/
예제 코드입니다. (jquery 1.9.1 이상) 테스트는 못해봤습니다.
</p>
<p><script>
var $divs = $("div.group");</p>
<p>$(function (){
var OrderedDivs = $divs.sort(function (a, b) {
return $(a).find("p.name").text() > $(b).find("p.name").text();
});
$("#group").html(OrderedDivs);
});
</script></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
b
bonobono
7년 전
감사합니다~ 한방에잘돼네요!
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인