重新安排了一系列產生的div使用javascript

Question

我有一系列產生的產品的其中有些看起來像這樣

<div class="product"><div class="productImage" title="one"></div></div> 
<div class="product"><div class="productImage" title="two"></div></div> 
<div class="product"><div class="productImage" title="three"></div></div> 
<div class="product"><div class="productImage" title="four"></div></div> 

有沒有一種方法，我可以把它們放在一個陣列使用JavaScript來展現他們在不同的順序？

無法解決它。任何建議？

what I have right now 
<div class="product"> 
    <div class="productImage" title="Elixer Altima">product image goes here with other shopping features</div> 
</div> 
<div class="product"> 
    <div class="productImage" title="Bain Oleo Relax">product image goes here with other shopping features</div> 
</div> 
<div class="product"> 
    <div class="productImage" title="Satin">product image goes here with other shopping features</div> 
</div> 
<div class="product"> 
    <div class="productImage" title="Hair Cream">product image goes here with other shopping features</div> 
</div> 

New Order to be 
<div class="product"> 
    <div class="productImage" title="Hair Cream">product image goes here with other shopping features</div> 
</div> 
<div class="product"> 
    <div class="productImage" title="Satin">product image goes here with other shopping features</div> 
</div> 
<div class="product"> 
    <div class="productImage" title="Bain Oleo Relax"></div> 
</div> 
<div class="product"> 
    <div class="productImage" title="Elixer Altima">product image goes here with other shopping features</div> 
</div> 

Answer 1

我有好運氣與此http://james.padolsey.com/javascript/sorting-elements-with-jquery/

Answer 2

假設您想按字母順序排列的標題。

var $items= $('.product').detach(); 

$('#container').append($items.sort(sortTitles)); 


function sortTitles(a,b){ 
    return a.title > b.title ? 1 :-1; 

} 

調整其他屬性排序功能需要

Answer 3

可以排序基於文本，HTML屬性和更多，如果你喜歡。對於instnace，如果你想基於標題本身，下面將工作的字母順序進行排序（我已經添加了用於演示的一個#products父元素）：

$("#products .product").sort(function(a,b){ 
    var _a = $(a).text(), _b = $(b).text(); 
    return _a > _b ? 1 : -1; 
})​.appendTo("#products");​​​​ 

小提琴：http://jsfiddle.net/yxCWd/

就你而言，看起來你只是想扭轉自然秩序。這可以通過多種方式完成。一種這樣的方式是使用在.reverse方法上Array原型扭轉集合的順序，然後再追加元素到它們的父：

var container = $("#products"); 
container.append(container.find(".product").get().reverse());​ 

調用.get我們的集合轉換成一個陣列，從而使我們能夠撥打.reverse。

小提琴：http://jsfiddle.net/yxCWd/2/