CODEWITHSUNDEEP
javascriptjquery
Joaquin
Joaquin

Reputation: 21

How to order divs with JQUERY

i have divs like this: 

<div class="oferta SYB">


 <div class="infoferta">
    <div class="datosoferta">
      <div class="ofertapagas">Pag&aacute;s<br/> $ 67</div>
      <div class="ofertavalor">Valor<br /> $ 160</div>
      <div class="ofertadescuento">Descuento $ 93</div>

  </div>
</div>

i want to order the divs with the class="oferta" by the value in "ofertapagas" or the value in "ofertavalor" or the value in "ofertadescuento", i dont know how to, i cannot use the database, i just can use Jquery, i am using the last version of it. Some Help please!!

Upvotes: 1

Views: 380

Answers (3)

Jon Gauthier
Jon Gauthier

Reputation: 25582

If you place those offer DIVs in some sort of container (another DIV?) you can then fetch all the offers and sort by their childrens' values.

In the HTML below, I put the offer divs inside a container div, and added a data-value attribute to each of the child divs containing data, for easier access (no regular expressions required).

<div id="ofertas_container">
    <div class="infoferta">
        <div class="datosoferta">
            <div class="ofertapagas" data-value="67">Pag&aacute; $ 67</div>
            <div class="ofertavalor" data-value="130">Valor $ 130</div>
            <div class="ofertadescuento" data-value="93">Descuento $ 93</div>
        </div>
    </div>
    <div class="infoferta">
        <div class="datosoferta">
            <div class="ofertapagas" data-value="57">Pag&aacute; $ 57</div>
            <div class="ofertavalor" data-value="150">Valor $ 150</div>
            <div class="ofertadescuento" data-value="43">Descuento $ 43</div>
        </div>
    </div>
    <div class="infoferta">
        <div class="datosoferta">
            <div class="ofertapagas" data-value="107">Pag&aacute; $ 107</div>
            <div class="ofertavalor" data-value="250">Valor $ 250</div>
            <div class="ofertadescuento" data-value="1000">Descuento $ 1000</div>
        </div>
    </div>
</div>

<a href="javascript: void 0;" id="sort_pagas" data-key="ofertapagas">Pag&aacute;</a>
<a href="javascript: void 0;" id="sort_valor" data-key="ofertavalor">Valor</a>
<a href="javascript: void 0;" id="sort_descuento" data-key="ofertadescuento">Descuento</a>

The JS / jQuery function:

ofertas_sort = function(sort_key) {
    // array of offer divs
    var ofertas = $('.infoferta');

    // the div classname corresponding to the key by which
    // we are sorting
    var sort_key_sel = 'div.' + sort_key;

    // in large lists it'd be more efficient to calculate
    // this data pre-sort, but for this instance it's fine
    ofertas.sort(function(a, b) {
        return parseInt($(sort_key_sel, a).attr('data-value')) -
            parseInt($(sort_key_sel, b).attr('data-value'));
    });

    // re-fill the container with the newly-sorted divs
    $('#ofertas_container').empty().append(ofertas);
};

Here's the code on jsFiddle, with some links at the bottom of the HTML to demo the sorting: http://jsfiddle.net/hans/Rfsfs/2/

I changed some of the values to make the sorting more visible.

Upvotes: 0

miqbal
miqbal

Reputation: 2227

Using ui. JQuery UI - Sortable Demos & Documentation

For your code;

$( ".offer" ).sortable({
   update: function(event, ui) { // do post server. }
});

Upvotes: 0

jAndy
jAndy

Reputation: 236022

jQuery abstracts Array.prototype.sort. Since jQuery wrappet sets are Array like objects, you can just call .sort() on them or apply sort on them.

var $datosoferta = $('.datosoferta');

$datosoferta.children().detach().sort(function(a,b) {
    return +a.textContent.split(/\$/)[1].trim() - +b.textContent.split(/\$/)[1].trim();
}).appendTo($datosoferta);

See http://typeofnan.blogspot.com/2011/02/did-you-know.html

Demo: http://jsfiddle.net/Rfsfs/

Upvotes: 4

Related Questions