[英]Change div order based on their id using jquery
I have disorder div in HTML page and that need to in ascending order based on their id. 我在HTML页面中存在div混乱,并且需要根据其ID升序排列。 I have some code but it is not working I just want to know what is wrong with code or do i need to do some more work with code. 我有一些代码,但是它不起作用,我只想知道代码出了什么问题,或者我需要对代码做更多的工作。 fiddle 小提琴
Jquery jQuery的
$('div').sort(function (a, b) {
var contentA =parseInt( $(a).attr('data-sort'));
var contentB =parseInt( $(b).attr('data-sort'));
return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
})
HTML 的HTML
<div data-sort='14'>14</div>
<div data-sort='6'>6</div>
<div data-sort='9'>9</div>
Use: 采用:
var asc=false;
var sorted=$('div').sort(function(a,b){
return (asc ==
($(a).data('sort') < $(b).data('sort'))) ? 1 : -1;
});
asc = asc ? false : true;
$('body').html(sorted);
Given that your data is integer based and the sort you need is ascending order, there is a neat way to do this with pure css :) 鉴于您的数据是基于整数的,并且您需要的排序是升序,因此有一种使用纯css的简洁方法:)
Just put your data divs inside a parent flexbox container and make your sort integer a css order property, like so... 只需将您的数据div放在父级flexbox容器中,然后将排序整数设为css order属性即可,就像这样...
<div id="container" style="display:flex">
<div style="order:14">14</div>
<div style="order:6">6</div>
<div style="order:9">9</div>
</div>
Only works in 'modern' browsers though. 不过,仅在“现代”浏览器中有效。
Check this out: http://jsfiddle.net/en107qxb/5/ 检查一下: http : //jsfiddle.net/en107qxb/5/
function sortUsingText(parent, childSelector) {
var items = parent.children(childSelector).sort(function(a, b) {
var vA = $(a).text();
var vB = $(b).text();
return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
});
parent.append(items);
}
sortUsingText($('#sortThis'), "div");
function sortUsingData(parent, childSelector) {
var items = parent.children(childSelector).sort(function(a, b) {
var vA = $(a).data('sort');
var vB = $(b).data('sort');
return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
});
parent.append(items);
}
sortUsingData($('#sortThisData'), "div");
HTML 的HTML
<div id="sortThis">
<div>3</div>
<div>1</div>
<div>2</div>
</div>
<div id="sortThisData">
<div data-sort="7">High</div>
<div data-sort="2">Low</div>
<div data-sort="5">Mid</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.