2016-06-01 15 views
-2

Ich habe einfache HTML-Daten:jQuery Eltern div Art

<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> 

Wenn ein Benutzer auf snmhdr Klasse klickt advtitle Klassendaten und Anzeige adv-row in sortierter Reihenfolge sortieren soll.

Wie kann ich dies mit jQuery erreichen?

Antwort

0

Ich habe einige Änderungen in Ihrer HTML-Struktur vorgenommen. Es wurden die divs hinzugefügt, die innerhalb eines Container-ID-DIVs sortiert werden müssen, und außerdem wurde die Klasse Sort-block zu div hinzugefügt, die sortiert werden müssen.

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