寻找一个javascript解决方案来重新排序div
我在页面中有一些div,显示了相同种类的不同内容,例如offers,now offers有结束时间,还有posted time,如果用户希望按结束时间或posted time订购,应该重新订购 我正在寻找一个javascript解决方案,可以做到这一点,ExtJS或JQuery下的任何特定库都可以 下面是这些div的样子寻找一个javascript解决方案来重新排序div,javascript,jquery,extjs,Javascript,Jquery,Extjs,我在页面中有一些div,显示了相同种类的不同内容,例如offers,now offers有结束时间,还有posted time,如果用户希望按结束时间或posted time订购,应该重新订购 我正在寻找一个javascript解决方案,可以做到这一点,ExtJS或JQuery下的任何特定库都可以 下面是这些div的样子 <div data-sortunit="1" data-sort1="40" data-sort2="156" data-sort3="1" data-sort4="13
<div data-sortunit="1" data-sort1="40" data-sort2="156" data-sort3="1"
data-sort4="1317620220" class="item">
</div>
<div data-sortunit="2" data-sort1="30" data-sort2="116" data-sort3="5"
data-sort4="1317620220" class="item">
</div>
<div data-sortunit="3" data-sort1="10" data-sort2="157" data-sort3="2"
data-sort4="1317620220" class="item">
</div>
因此,我希望能够根据数据sortN对这些div进行排序,N是一个整数编辑:好的,现在您已经提供了一些HTML,下面是javascript代码,它将按照所需的列号对特定的HTML进行排序:
function sortByDataItem(containerID, dataNum) {
var values = [];
$("#" + containerID + " .item").each(function(index) {
var item = {};
item.index = index;
item.obj = this;
item.value = $(this).data("sort" + dataNum);
values.push(item);
});
values.sort(function(a, b) {return(b.value - a.value);});
var container = $("#" + containerID);
for (var i = 0; i < values.length; i++) {
var self = $(values[i].obj);
self.detach();
container.prepend(self);
}
return;
}
$("#sort").click(function() {
var sortValue = $("#sortColumn").val();
if (sortValue) {
sortValue = parseInt(sortValue, 10);
if (sortValue && sortValue > 0 && sortValue <= 3) {
sortByDataItem("container", sortValue);
return;
}
}
$("#msg").show(1).delay(5000).fadeOut('slow');
});
还有一个jsFiddle,它在实际操作中显示:。我用jfriend00的答案制作了一个小小的jqueryPlugin:
(function($){
$.fn.sortChildrenByDataKey = function(key, desc){
var i, els = this.children().sort(function(a, b) {return (desc?1:-1)*($(a).data(key) - $(b).data(key));});
for (i = 0; i < els.length; i++) {
this.prepend($(els[i]).detach());
}
return this;
};
})(jQuery);
容器的子元素可以是任何元素。唯一重要的是,他们是直系子女,拥有data-X密钥
谢谢你,jfriend00 向我们展示您的HTML示例。具体如何实现这一点取决于HTML的工作方式。例如,要排序的值在哪里?是div的HTML吗?这是div的财产吗?添加了样本,谢谢,非常感谢,我没想到会有人友好地完成整个工作,你是一个了不起的人。
$("#sort").click(function() {
var prices = [];
// find all prices
$("#productList .price").each(function(index) {
var str = $(this).text();
var item = {};
var matches = str.match(/\d+\.\d+/);
if (matches && matches.length > 0) {
// parse price and add it to the prices array
item.price = parseFloat(matches[0]);
item.row = $(this).closest(".row").get(0);
item.index = index;
prices.push(item);
}
});
// now the prices array has all the prices in it
// sort it using a custom sort function
prices.sort(function(a, b) {
return(a.price - b.price);
});
// now pull each row out and put it at the beginning
// starting from the end of the prices list
var productList = $("#productList");
for (var i = prices.length - 1; i >= 0; i--) {
var self = $(prices[i].row);
self.detach();
productList.prepend(self);
}
});
(function($){
$.fn.sortChildrenByDataKey = function(key, desc){
var i, els = this.children().sort(function(a, b) {return (desc?1:-1)*($(a).data(key) - $(b).data(key));});
for (i = 0; i < els.length; i++) {
this.prepend($(els[i]).detach());
}
return this;
};
})(jQuery);
<div id="myContainer">
<div data-myKey="4"> ... </div>
<div data-myKey="2"> ... </div>
...
</div>
$('div#myContainer').sortChildrenByDataKey('myKey', true_or_false);