寻找一个javascript解决方案重新排序div [英] Looking for a javascript solution to reorder divs
问题描述
我正在寻找可以做到这一点的javascript解决方案，Ext JS下的任何特定库或JQuery都可以工作
这些div如何看起来像
< div data-sortunit =1数据-sort1 =40data-sort2 =156data-sort3 =1
data-sort4 =1317620220class =item>
< / div>
< div data-sortunit =2data-sort1 =30data-sort2 =116data-sort3 =5
data-sort4 =1317620220类= 项 >
< / div>
< div data-sortunit =3data-sort1 =10data-sort2 =157data-sort3 =2
data-sort4 =1317620220类= 项 >
< / div>
所以我想能够根据data-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）; （var i = 0; i< values.length; i ++）{
var self = $（values [i] .obj）;
self.detach（）;
container.prepend（self）;
}
return;
}
$（＃sort）点击（function（）{
var sortValue = $（＃sortColumn）。
if（sortValue）{
sortValue = parseInt（sortValue，10）;
if（sortValue&& sortValue> 0&& sortValue< = 3）{
sortByDataItem（container，sortValue）;
return;
}
}
$（＃msg）显示（1）.delay（5000）.fadeOut （'slow'）;
}）;
您可以在jsFiddle中看到它在这里工作： http://jsfiddle.net/jfriend00/JG32X/
由于您已经给我们了HTML，所以我已经制作了自己的HTML，并向您展示了如何使用jQuery进行排序：
HTML：
< button id =sort> Sort< / button>< br>
< div id =productList>
< div class =row>< div class =productName> Popcorn< / div>< div class =price> $ 5.00< / div>< / div>
< div class =row>< div class =productName> Peanuts< / div>< div class =price> $ 4.00< / div>< / div>
< div class =row>< div class =productName> Cookie< / div>< div class =price> $ 3.00< / div>< / div>
< div class =row>< div class =productName> Beer< / div>< div class =price> $ 5.50< / div>< / div>
< div class =row>< div class =productName>苏打< / div>< div class =price> $ 4.50< / div>< / div>
< / div>
Javascript（在页面加载后运行）：
$（＃sort）click（function（）{
var prices = [];
//查找所有价格
$ （#productList .price）。each（function（index）{
var str = $（this）.text（）;
var item = {};
var matches = str .match（/\d+\.\d+/）;
if（matches&& matches.length> 0）{
//解析价格并将其添加到价格数组
item.price = parseFloat（matches [0]）;
item.row = $（this）.closest（。row）。get（0）;
item.index =索引;
price.push（item）;
}
}）;
//现在price数组中有所有的价格
//使用一个自定义排序函数
prices.sort（function（a，b）{
return（a.price - b.price）;
}）;
//现在拉每个排出来，把它放在开始
//从第一个开始e结束价格表
var productList = $（＃productList）;
for（var i = prices.length - 1; i> = 0; i--）{
var self = $（prices [i] .row）;
self.detach（）;
productList.prepend（self）;
}
}）;
而且，一个jsFiddle显示它的行动： http://jsfiddle.net/jfriend00/vRdrA/ 。
I have some divs in the page that show different things of the same kind, for example offers, now offers have ending time, and also posted time, if the user wants to order by ending time, or posted time, they should be re ordered.
I'm looking for a javascript solution that could do that, any particular libraries under Ext JS , or JQuery would work
Here is how these divs look like
<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>
So I wanna be able to sort these divs based on data-sortN, N being an integer
Edit: OK, now that you've supplied some HTML, here's javascript code that will sort that specific HTML by the desired column number:
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');
});
You can see it work here in a jsFiddle: http://jsfiddle.net/jfriend00/JG32X/
Since you've given us no HTML to go on, I've made my own HTML and shown you how you can use jQuery to sort:
HTML:
<button id="sort">Sort</button><br>
<div id="productList">
<div class="row"><div class="productName">Popcorn</div><div class="price">$5.00</div></div>
<div class="row"><div class="productName">Peanuts</div><div class="price">$4.00</div></div>
<div class="row"><div class="productName">Cookie</div><div class="price">$3.00</div></div>
<div class="row"><div class="productName">Beer</div><div class="price">$5.50</div></div>
<div class="row"><div class="productName">Soda</div><div class="price">$4.50</div></div>
</div>
Javascript (run after page is loaded):
$("#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);
}
});
And, a jsFiddle that shows it in action: http://jsfiddle.net/jfriend00/vRdrA/.
这篇关于寻找一个javascript解决方案重新排序div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
