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