JQuery Sort Divs basierend auf Inhalt -Nicht arbeiten-

Question

Ich habe mehrere Divs, die ich mit der JQuery-Sortierfunktion basierend auf dem Produktnamen-Attribut innerhalb des Produkts sortieren möchte. Wenn ich jedoch klicke, um die Funktion auszuführen, werden alle divs plötzlich verschwinden, als ich inspizierte, um die Fehler zu sehen, wurde kein Fehler angezeigt.

Bitte helfen Sie mir zu wissen, was das Problem ist.

Hier ist meine JQuery-Funktion und ruft:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $divs = $("div.section-item"); 
     $("#asc").on("click", function(){ 
      var alphabetically = $divs.sort(function(a, b){ 
       return $(a).find(".name").text() > $(b).find("name").text(); 
      }); 
      $("#section-item").html(alphabetically);   
     }); 
    }); 
</script> 

Dies ist der Container mit allen Divs:

<div id="block-section-item"> 
<div id="bdi-button"> 
    <button type="submit" id="asc" class="rec">Nom</button> 
</div> 
<div id="section-item"> 
    <?php 
    include 'Include/__Class/Cls_Product.php'; 
    $product = new ClsProduct($bdd); 
    $products = $product->DisplayAllProducts(); 

    foreach($products as $row){ 
     echo'<div class="section-items"> 
       <span class="section-items-img"> 
        <img src="Image/clio-full.jpg"> 
       </span> 
       <span class="section-items-bottom"> 
       <span class="section-item-text">'; 
       echo '<h4 class="name">'.$row['Product_name'].'</h4>'; 
       echo '<h4 class="price">'.$row['Product_price'].'</h4>'; 
     echo'<span class="section-item-icon"> 
     <span class="voir-item"><a href="'.$_SERVER['PHP_SELF'].'?id='.$row["Product_id"].'"></a></span> 
     <span class="middle-item"></span> 
     <span class="nakrih-item"><a href="'.$_SERVER['PHP_SELF'].'?id='.$row["Product_id"].'"></a></span> 
     </span> 
     </span>'; 
     echo'</div>'; 
    } 
    ?>        
</div> 
</div> 

Answer 1

bereiten:

HTML:

<div id="block-section-item"> 
    <div id="bdi-button"> 
     <button type="submit" id="asc" class="rec">Nom</button> 
    </div> 
    <div id="section-item"> 
     <div class="section-items"> 
      <span class="section-items-img"> 
       <img src="Chrysanthemum.gif"> 
      </span> 
      <span class="section-items-bottom"> 
       <span class="section-item-text"><h4 class="name">Product_name2</h4><h4 class="price">22</h4><span class="section-item-icon"> 
         <span class="voir-item"><a href="/test/index.php?id=2"></a></span> 
         <span class="middle-item"></span> 
         <span class="nakrih-item"><a href="/test/index.php?id=2"></a></span> 
        </span> 
       </span></span></div><div class="section-items"> 
      <span class="section-items-img"> 
       <img src="Chrysanthemum.gif"> 
      </span> 
      <span class="section-items-bottom"> 
       <span class="section-item-text"><h4 class="name">Product_name1</h4><h4 class="price">11</h4><span class="section-item-icon"> 
         <span class="voir-item"><a href="/test/index.php?id=1"></a></span> 
         <span class="middle-item"></span> 
         <span class="nakrih-item"><a href="/test/index.php?id=1"></a></span> 
        </span> 
       </span></span></div><div class="section-items"> 
      <span class="section-items-img"> 
       <img src="Chrysanthemum.gif"> 
      </span> 
      <span class="section-items-bottom"> 
       <span class="section-item-text"><h4 class="name">Product_name3</h4><h4 class="price">33</h4><span class="section-item-icon"> 
         <span class="voir-item"><a href="/test/index.php?id=3"></a></span> 
         <span class="middle-item"></span> 
         <span class="nakrih-item"><a href="/test/index.php?id=3"></a></span> 
        </span> 
       </span></span></div>        
    </div> 
</div> 

Javascript:

$(document).ready(function() { 
    $divs = $(".section-items"); 
    $("#asc").on("click", function() { 

     var alphabetically = $divs.sort(function (a, b) { 
      return $(a).find("[class='name']").text() > $(b).find("[class='name']").text(); 
     }); 
     $("#section-item").html(alphabetically); 
    }); 
}); 

jsfiddle:

https://jsfiddle.net/bs49L18k/2/