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 its <div data-sid=xx> tags do not get sorted 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.
Does not work
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://ift.tt/1r529cJ">
<script src="http://ift.tt/1qRgvOJ"></script>
<script src="http://ift.tt/1mcJXw6"></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" style="padding-right: 0; border-right: solid;">
<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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://ift.tt/1r529cJ">
<script src="http://ift.tt/1qRgvOJ"></script>
<script src="http://ift.tt/1mcJXw6"></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" style="padding-right: 0; border-right: solid;">
<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>
<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>
Aucun commentaire:
Enregistrer un commentaire