如何使用JQUERY订购div

Question

我有这样的div：

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

我想通过“ofertapagas”中的值或“ofertavalor”中的值或“ofertadescuento”中的值来订购具有class =“oferta”的div，我不知道如何，我不能使用数据库，我只是可以使用Jquery，我正在使用它的最后一个版本。 请帮忙!!

Answer 1

jQuery摘要Array.prototype.sort 。 由于jQuery wrappet集是类似于Array的对象 ，因此您可以在它们上调用.sort()或对它们应用sort。

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

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

请参阅http://typeofnan.blogspot.com/2011/02/did-you-know.html

演示 ： http ： //jsfiddle.net/Rfsfs/

Answer 2

用ui。 JQuery UI - 可排序的演示和文档

对于你的代码;

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

Answer 3

如果你把那些提供DIV放在某种容器（另一个DIV？）中，你可以获取所有的提议并按照他们孩子的价值排序。

在下面的HTML中，我将商品div放在容器div中，并为包含data-value每个子div添加了一个data-value属性，以便于访问（不需要正则表达式）。

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

JS / jQuery函数：

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);
};

这是jsFiddle上的代码，在HTML底部有一些链接来演示排序： http ： //jsfiddle.net/hans/Rfsfs/2/

我更改了一些值以使排序更加明显。