Jquery déplacer les éléments par la valeur de tri

Question

J'ai un problème avec le tri et la disposition des éléments. Tout d'abord, j'ai besoin de trier les éléments par une certaine valeur (par exemple prix, date, nom) et ensuite appliquer la disposition des éléments sur la page en fonction de cette valeur. J'ai trouvé beaucoup de plugins et les fonctions de tri mais ils ne font que changer la valeur dans les éléments sous l'arrangement. Je ne sais pas comment trier les éléments et ensuite changer leur position en fonction de la valeur de tri.

Par exemple, j'ai la structure html:

<div id="page-wrap> 
    <ul> 
    <li class="first"> 
    <p class="price">2500</p> 
    </li> 
    <li class="second"> 
    <p class="price">4300</p> 
    </li> 
    <li class="third"> 
    <p class="price">1800</p> 
    </li> 
    <li class="fourth"> 
    <p class="price">3871</p> 
    </li> 
    </ul> </div> 

et le résultat devrait être (par exemple trier et déplacer les éléments par prix le plus bas):

<div id="page-wrap"> 

    <ul> 
    <li class="third"> 
    <p class="price">1800</p> 
    </li> 
    <li class="fisrt"> 
    <p class="price">2500</p> 
    </li> 
    <li class="fourth"> 
    <p class="price">3871</p> 
    </li> 
    <li class="second"> 
    <p class="price">4300</p> 
    </li> 

    </ul></div> 

Comme vous pouvez le voir, je veux changer tout arrangement des éléments par le prix le plus bas, non seulement la valeur.

Si certains gourous savent comment faire cela par jquery ou javascript, je serai très reconnaissant envers lui.

Merci d'avoir répondu à

Answer 1

Je pense que cette méthode de tri d'insertion ne change vos positions d'objet:

http://www.tomgreenaway.com/2009/01/jquery-list-insertion-sort-plugin/

Je pense que vous devrez adapter à vos propres besoins bien, parce que vous voulez pour trier sur le prix à l'intérieur du p.

Answer 2

sans utiliser des plug-ins, cela devrait fonctionner:

function comparePrice(a, b) { 
    return (parseInt($(a).find(".price").text(), 10) - parseInt($(b).find(".price").text(), 10)); 
} 

$("li").sort(comparePrice).appendTo("#page-wrap ul");