Question

我有一个需要对它们进行排序的项目列表。 my previous question中的答案部分解决了这个问题。代码中包含<div data-sid=xx>标记中某些标记的项目不会被排序，其样式也会停止工作。

在演示中，您可以通过点击“按价格排序”按钮看到项目不会被排序并且它们的背景颜色会发生变化，但只要我用单个<h1>标签替换标签就可以了。< / p>

此版本的代码包含一些标记作为其<div data-sid=xxx>标记的正文。

Demo

不起作用

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

正如您所看到的，此代码在其<div data-sid=xx>标记的正文中只有单个标记。

作品

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

Answer 1

<div data-sid="12">
<div data-sid="13">
<div data-sid="1">

缺少撇号。

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

将JavaScript中的查询更改为仅对直接子元素进行排序，而不是对其内容进行排序 - 这会破坏您需要的排序机制（尝试多次单击演示中的排序并观察文本的UI顺序如何开始排除）。 / p>

您还没有向元素添加name数据属性，这会破坏尝试使用它的第二个排序按钮逻辑。

修正版：https://jsfiddle.net/f8w1hpj2/2/

如果他们的身体中没有很多标签，则只能对div进行排序

Demo

1 个答案: