Javascript/JQuery von Textwert

Question

Aussortieren div habe ich eine Liste, die wie folgt aussieht:

<div class="list-group"> 
    <div class="list-group-item"> 
     <div class="media"> 
      <span class="label label-success pull-right">10</span> 
      <div class="pull-left"> 
       <img class="media-object img-circle" src="img.jpg" alt="Image"> 
      </div> 
      <div class="media-body"> 
       <h4 class="media-heading">name here</h4> 
      </div> 
     </div> 
    </div> 
    <div class="list-group-item"> 
     <div class="media"> 
      <span class="label label-success pull-right">7</span> 
      <div class="pull-left"> 
       <img class="media-object img-circle" src="img.jpg" alt="Image"> 
      </div> 
      <div class="media-body"> 
       <h4 class="media-heading">name here too</h4> 
      </div> 
     </div> 
    </div> 
    <div class="list-group-item"> 
     <div class="media"> 
      <span class="label label-success pull-right">3</span> 
      <div class="pull-left"> 
       <img class="media-object img-circle" src="img.jpg" alt="Image"> 
      </div> 
      <div class="media-body"> 
       <h4 class="media-heading">name here </h4> 
      </div> 
     </div> 
    </div> 
</div> 

Es gibt 3 Artikel in dieser Liste, wie Sie sehen können. Es gibt eine <span> mit Klassenbezeichnung, die eine Nummer enthalten, die drei von ihnen tun.

ich einen Knebel die Bestellung durch diese Zahlen Asc und Beschr haben müssen ...

Wie kann ich das tun? Wäre es einfacher, wenn ich die List-Group-Item Divs in <li> verpacken würde?

Answer 1

Wählen die Elemente in Frage, .sort() sie in der entsprechenden Richtung, dann append them to ihren Behälter (wo die append Operation wird bewegen bestehende Elemente).

So ein wenig etwas wie folgt aus:

$("button").click(function(e) { 
 

 
    var direction = $(this).data("dir") 
 
    $(this).data("dir", direction * -1) 
 
    .text("Sort (" + (direction == 1 ? "desc" : "asc") + ")") 
 

 
    $("div.list-group-item").sort(function(a,b) { 
 
    return ($(a).find("span.label").text() - $(b).find("span.label").text()) * direction 
 
    }).appendTo(".list-group") 
 
    
 
})

div.list-group-item div { display: inline-block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button data-dir="1">Sort (asc)</button> 
 
<div class="list-group"> 
 
    <div class="list-group-item"> 
 
     <div class="media"> 
 
      <span class="label label-success pull-right">10</span> 
 
      <div class="pull-left"> 
 
       <img class="media-object img-circle" src="img.jpg" alt="Image"> 
 
      </div> 
 
      <div class="media-body"> 
 
       <h4 class="media-heading">name here for 10</h4> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="list-group-item"> 
 
     <div class="media"> 
 
      <span class="label label-success pull-right">7</span> 
 
      <div class="pull-left"> 
 
       <img class="media-object img-circle" src="img.jpg" alt="Image"> 
 
      </div> 
 
      <div class="media-body"> 
 
       <h4 class="media-heading">name here too (7)</h4> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="list-group-item"> 
 
     <div class="media"> 
 
      <span class="label label-success pull-right">3</span> 
 
      <div class="pull-left"> 
 
       <img class="media-object img-circle" src="img.jpg" alt="Image"> 
 
      </div> 
 
      <div class="media-body"> 
 
       <h4 class="media-heading">name here for 3</h4> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Beachten Sie, dass die - und * Betreiber sowohl ihre Operanden in Zahlen zwingen.