我有一个需要对它们进行排序的项目列表。 my previous question中的答案部分解决了这个问题。代码中包含<div data-sid=xx>
标记中某些标记的项目不会被排序,其样式也会停止工作。
在演示中,您可以通过点击“按价格排序”按钮看到项目不会被排序并且它们的背景颜色会发生变化,但只要我用单个<h1>
标签替换标签就可以了。< / p>
此版本的代码包含一些标记作为其<div data-sid=xxx>
标记的正文。
不起作用
<!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>
答案 0 :(得分:1)
<div data-sid="12">
<div data-sid="13">
<div data-sid="1">
缺少撇号。
$('.clist > div').sort(function(a,b){})
将JavaScript中的查询更改为仅对直接子元素进行排序,而不是对其内容进行排序 - 这会破坏您需要的排序机制(尝试多次单击演示中的排序并观察文本的UI顺序如何开始排除)。 / p>
您还没有向元素添加name
数据属性,这会破坏尝试使用它的第二个排序按钮逻辑。