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/

基于内容的JQuery排序 - 不工作 -

1 个答案: