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); }); 

Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

python 3.x - PyQt5 - Signal : pyqtSignal no method connect -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)