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 like objects ，你可以在它们上面调用.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 - Sortable Demos & Documentation

代码;

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

Answer 3

如果您将这些优惠DIV放在某种容器（另一个DIV？）中，您可以获取所有优惠并按其子项的值排序。

在下面的HTML中，我将商品div放在容器div中，并为包含数据的每个子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/

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

如何使用JQUERY订购div

3 个答案: