如果div中没有很多标签，则只能对其进行排序 [英] Can only sort divs if they do not have many tags in their bodies
问题描述
我有一个需要排序的项目列表. 我之前的问题部分解决了问题.在代码中的<div data-sid=xx>标记中带有某些标记的项目无法排序，其样式也将停止工作.
在演示中，您可以通过单击按价格排序"按钮来查看这些项目，这些项目将不会进行排序，其背景颜色也将发生变化，但是只要我将这些标签替换为单个<h1>标签，它就会起作用.
此版本的代码的<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>
<div data-sid="12">
<div data-sid="13">
<div data-sid="1">
缺少撇号.
$('.clist > div').sort(function(a,b){})
将JavaScript中的查询更改为仅对直接子元素进行排序，而不对它们的内容进行排序-这破坏了您需要的排序机制(尝试多次单击演示中的sort并观察文本的UI顺序如何开始出错). /p>
您还没有向元素添加name数据属性，这破坏了试图使用它的第二个排序按钮逻辑.
固定版本: https://jsfiddle.net/f8w1hpj2/2/
I have a list of items that need to sort them. The answer in my previous question partially solved the issue. The items in the code that has some tags in thier <div data-sid=xx> tags do not get sorted and their styles stop working.
In demo you can see by clicking on "Sort By Price" button the items wont get sorted and their background colors will get changed, but as soon as I replace the tags with single <h1> tags it works.
This version of code has some tags as body of its <div data-sid=xxx> tags.
Demo
Does not work
<!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>
As you can see this code just has single tags in body of its <div data-sid=xx> tags.
Works
<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">
Missing apostrophes.
$('.clist > div').sort(function(a,b){})
Change the queries in your JavaScript to only sort direct child elements, not their contents - that breaks the sorting mechanism you need (try clicking sort in your demo several times and watch how the UI order of text starts bugging out).
You also have no name data-attribute added to the elements, which breaks the second sorting button logic that is trying to use it.
Fixed version: https://jsfiddle.net/f8w1hpj2/2/
这篇关于如果div中没有很多标签，则只能对其进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
