html - jQuery parent div sort -
i have simple html data:
<div class="divtable svc-adv" id="info"> <div class="divtablebody adv-body"> <div class="divtablerow adv-row"> <div class="divtablecell adv-cell snmhdr">title</div> <div class="divtablecell adv-cell stitlehdr">service name</div> <div class="divtablecell adv-cell snhdr">service number</div> </div> </div> </div> <div class="divtable svc-adv servicealert"> <div class="divtablebody adv-body"> <div class="divtablerow adv-row"> <div class="divtablecell adv-cell advtitle">was</div> <div class="divtablecell adv-cell advsnm">abc</div> <div class="divtablecell adv-cell advsnum">123</div> </div> </div> </div> <div class="divtable svc-adv servicealert"> <div class="divtablebody adv-body"> <div class="divtablerow adv-row"> <div class="divtablecell adv-cell advtitle">nyp</div> <div class="divtablecell adv-cell advsnm">xyz</div> <div class="divtablecell adv-cell advsnum">321</div> </div> </div> </div>
when user clicks on snmhdr
class should sort advtitle
class data , display adv-row
in sorted order.
how can achieve using jquery?
i have made few changes in html structure. added div's needed sorted inside container id div , added class sort-block div's needed sorted.
<div class="divtable svc-adv" id="info"> <div class="divtablebody adv-body"> <div class="divtablerow adv-row"> <div class="divtablecell adv-cell snmhdr">title</div> <div class="divtablecell adv-cell stitlehdr">service name</div> <div class="divtablecell adv-cell snhdr">service number</div> </div> </div> </div> <div id="container"> <div class="divtable sort-block svc-adv servicealert"> <div class="divtablebody adv-body"> <div class="divtablerow adv-row"> <div class="divtablecell adv-cell advtitle">was</div> <div class="divtablecell adv-cell advsnm">abc</div> <div class="divtablecell adv-cell advsnum">123</div> </div> </div> </div> <div class="divtable sort-block svc-adv servicealert"> <div class="divtablebody adv-body"> <div class="divtablerow adv-row"> <div class="divtablecell adv-cell advtitle">nyp</div> <div class="divtablecell adv-cell advsnm">xyz</div> <div class="divtablecell adv-cell advsnum">321</div> </div> </div> </div> </div>
jquery code:
var $divs = $("div.sort-block"); $('.snmhdr').on('click', function () { var alphabeticallyordereddivs = $divs.sort(function (a, b) { return $(a).find(".advtitle").text() > $(b).find(".advtitle").text(); }); $("#container").html(alphabeticallyordereddivs); });