用JavaScript重新排列一系列生成的div

Question

I have a series of generated products which somewhat looks like this

<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>

Is there a way I could put them in an array to show them in different order using javascript?

Cant figure it out. Any suggestion?

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

Assume you want titles in alphabetic order .

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

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


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

}

Adjust sort function for other attributes as required

Answer 3

You can sort based on the text, html, attributes and more if you like. For instnace, if you wanted to sort based on the alphabetical order of the titles themselves, the following would work (I've added a #products parent element for demonstration purposes):

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

Fiddle: http://jsfiddle.net/yxCWd/

In your case, it appears you just want to reverse the natural order. This could be done any number of ways. One such way would be to use the .reverse method on the Array prototype to reverse the order of a collection, and then re-append the elements to their parent:

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

Calling .get converts our collection to an array, thus giving us the ability to call .reverse .

Fiddle: http://jsfiddle.net/yxCWd/2/