자바스크립트/제이쿼리 가나다순 정렬
본문
<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>
.name 값에 따라 .group 을 가나다 순으로 정렬하고 싶습니다.
아래는 정렬 후 입니다
<div id="group">
<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">13</p>
</div>
</div>
<div class="group">
<div class="info">
<p class="name">오렌지</p>
<p class="age">19</p>
</div>
</div>
</div>
도움부탁드립니다..
답변 1
참조한 페이지들입니다.
https://stackoverflow.com/questions/6133723/sort-divs-in-jquery-based-on-attribute-data-sort
https://jsfiddle.net/hibbard_eu/C2heg/
예제 코드입니다. (jquery 1.9.1 이상) 테스트는 못해봤습니다.
<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>
감사합니다~ 한방에잘돼네요!
답변을 작성하시기 전에 로그인 해주세요.
