Copy
<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 을 가나다 순으로 정렬하고 싶습니다.
아래는 정렬 후 입니다
Copy
<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개 / 댓글 1개
채택된 답변
+20 포인트
마르스컴퍼니
2018-02-19 (월) 16:33:29
참조한 페이지들입니다.
https://stackoverflow.com/questions/6133723/sort-divs-in-jquery-based-on-attribute-data-sort
https://jsfiddle.net/hibbard_eu/C2heg/
예제 코드입니다. (jquery 1.9.1 이상) 테스트는 못해봤습니다.
Copy
<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>답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.