Javascript 如果div的主体中没有很多标记，则只能对其进行排序_Javascript_Jquery_Html

Javascript 如果div的主体中没有很多标记，则只能对其进行排序

javascript jquery html

Javascript 如果div的主体中没有很多标记，则只能对其进行排序,javascript,jquery,html,Javascript,Jquery,Html,我有一个需要排序的项目列表。中的答案部分解决了这个问题。代码中的项在它们的标记中有一些标记，这些项不会被排序，它们的样式也会停止工作在演示中，您可以通过单击“按价格排序”按钮看到项目不会被排序，它们的背景颜色也会改变，但只要我用单个标签替换标签，它就会工作此版本的代码有一些标记作为其标记的主体不起作用 <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="wid

我有一个需要排序的项目列表。中的答案部分解决了这个问题。代码中的项在它们的

标记中有一些标记，这些项不会被排序，它们的样式也会停止工作

在演示中，您可以通过单击“按价格排序”按钮看到项目不会被排序，它们的背景颜色也会改变，但只要我用单个

标签替换标签，它就会工作

此版本的代码有一些标记作为其

标记的主体

不起作用

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
     <button id="price" data-sort="0">Sort by Price:</button><br>
<button id="name" data-sort="0">Sort by Name:</button><br>

        <div id= "row" class="row">
            <div id="items" class="col-md-7">
            <div class="clist">
                <div data-sid=12>  <<many tags in its body
                    <a href="www.example.com?id=1">
                        <div style="margin-bottom: 2px; text-align: left; background-color: green;">
                            <div>
                                Name:
                                <h1>Demo1</h1>
                            </div>
                            <div>Price:12</div>

                        </div>
                    </a>
                </div>
                <div data-sid=13>
                    <a href="www.example.com?id=2">
                        <div style="margin-bottom: 2px; text-align: left; background-color: green;">
                            <div>
                                Name:
                                <h1>Demo2</h1>
                            </div>
                            <div>Price:13</div>

                        </div>
                    </a>
                    </div>
                <div data-sid=1>
                    <a href="www.example.com?id=3">
                        <div style="margin-bottom: 2px; text-align: left; background-color: green;">
                            <div>
                                Name:
                                <h1>Demo3</h1>
                            </div>
                            <div>Price:1</div>

                        </div>
                    </a>
                </div>
                </div>
            </div>

        </div>

</div>
<script>
$(document).ready(function(){
    $('#price').on('click', function(){
        var s = $(this).data('sort'); console.log(s);
        if(s === 0){
            $(this).data('sort', 1);
            $('.clist div').sort(function(a,b){
               return a.dataset.sid < b.dataset.sid
            }).appendTo('.clist')            
        }else{
            $(this).data('sort', 0);
            $('.clist div').sort(function(a,b){
               return a.dataset.sid > b.dataset.sid
            }).appendTo('.clist')
        }
    });

        $('#name').on('click', function(){
        var s = $(this).data('sort'); console.log(s);
        if(s === 0){
            $(this).data('sort', 1);
            $('.clist div').sort(function(a,b){
               return a.dataset.name < b.dataset.name
            }).appendTo('.clist')            
        }else{
            $(this).data('sort', 0);
            $('.clist div').sort(function(a,b){
               return a.dataset.name > b.dataset.name
            }).appendTo('.clist')
        }
    });
});
</script>

    <footer> </footer>
</body>
</html>


按价格排序：

按名称排序：

b、 dataset.name
}).appendTo（“.clist”）
}
});
});

正如您所看到的，这段代码的

标记体中只有一个标记

有效

        <div id= "row" class="row">
            <div id="items" class="col-md-7">
            <div class="clist">
                <div data-sid=12> <<<< just one tag in its body
                <h1>12</h1>
                </div>
                <div data-sid=13>
                    <h1>13</h1>
                    </div>
                <div data-sid=1>
                <h1>1</h1>
                </div>
                </div>
            </div>

        </div>


将JavaScript中的查询更改为仅对直接子元素进行排序，而不是对其内容进行排序——这打破了您需要的排序机制（尝试在演示中单击“排序”几次，然后观察文本的UI顺序是如何开始出错的）
元素中也没有添加name
data属性，这会破坏尝试使用它的第二个排序按钮逻辑
固定版本：
<div data-sid="12">
<div data-sid="13">
<div data-sid="1">

 $('.clist > div').sort(function(a,b){})