コンテンツに基づくJQueryソートディビジョン -

Question

私は、製品内の製品名属性に基づいてJQueryソート機能を使用してソートしたい複数のDivを持っています。しかし、関数を実行するためにクリックすると、すべての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

それを試してみてください：

<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を持つコンテナです：

は、ここに私のjQueryの機能とは呼んだ

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/