JQuery按内容排序Div-Not Working-

Question

我有多个Div，我想使用基于产品内部产品名称属性的JQuery排序函数进行排序。但是，当我点击运行该功能时，所有div将突然消失，当我检查以查看错误时，没有显示任何错误。

请帮助我知道是什么问题。

这里是我的jQuery函数和调用：

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

这是所有的DIV容器：

<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

试一下：

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/