Блог

У меня есть несколько divs на странице, которые показывают разные вещи одного и того же типа, например, предложения, теперь предложения имеют время окончания, а также время публикации, если пользователь хочет сделать заказ по времени окончания или времени публикации, их следует переупорядочить.

Я ищу решение javascript, которое могло бы это сделать, какие-либо конкретные библиотеки под Ext JS или jQuery будут работать

Вот как выглядят эти divs

 <div data-sortunit="1" data-sort1="40" data-sort2="156" data-sort3="1"
data-sort4="1317620220" class="item">
</div>

<div data-sortunit="2" data-sort1="30" data-sort2="116" data-sort3="5"
data-sort4="1317620220" class="item">
</div>

<div data-sortunit="3" data-sort1="10" data-sort2="157" data-sort3="2"
data-sort4="1317620220" class="item">
</div>
  

Итак, я хочу иметь возможность сортировать эти divs на основе data-sortN, N — целое число

Редактировать: Хорошо, теперь, когда вы предоставили некоторый HTML, вот код javascript, который отсортирует этот конкретный HTML по нужному номеру столбца:

 function sortByDataItem(containerID, dataNum) {
    var values = [];
    $("#"   containerID   " .item").each(function(index) {
        var item = {};
        item.index = index;
        item.obj = this;
        item.value = $(this).data("sort"   dataNum);
        values.push(item);
    });
    values.sort(function(a, b) {return(b.value - a.value);});
    var container = $("#"   containerID);
    for (var i = 0; i < values.length; i  ) {
        var self = $(values[i].obj);
        self.detach();
        container.prepend(self);
    }
    return;
}


$("#sort").click(function() {
    var sortValue = $("#sortColumn").val();
    if (sortValue) {
        sortValue = parseInt(sortValue, 10);
        if (sortValue amp;amp; sortValue > 0 amp;amp; sortValue <= 3) {
            sortByDataItem("container", sortValue);
            return;
        }
    }
    $("#msg").show(1).delay(5000).fadeOut('slow');
});
  

Вы можете увидеть, как это работает здесь, в jsFiddle: http://jsfiddle.net/jfriend00/JG32X /

Поскольку вы не дали нам HTML для продолжения, я создал свой собственный HTML и показал вам, как вы можете использовать jQuery для сортировки:

HTML:

 <button id="sort">Sort</button><br>
<div id="productList">
    <div class="row"><div class="productName">Popcorn</div><div class="price">$5.00</div></div>
    <div class="row"><div class="productName">Peanuts</div><div class="price">$4.00</div></div>
    <div class="row"><div class="productName">Cookie</div><div class="price">$3.00</div></div>
    <div class="row"><div class="productName">Beer</div><div class="price">$5.50</div></div>
    <div class="row"><div class="productName">Soda</div><div class="price">$4.50</div></div>
</div>
  

Javascript (запускается после загрузки страницы):

 $("#sort").click(function() {
    var prices = [];
    // find all prices
    $("#productList .price").each(function(index) {
        var str = $(this).text();
        var item = {};
        var matches = str.match(/d .d /);
        if (matches amp;amp; matches.length > 0) {
            // parse price and add it to the prices array
            item.price = parseFloat(matches[0]);
            item.row = $(this).closest(".row").get(0);
            item.index = index;
            prices.push(item);
        }
    });
    // now the prices array has all the prices in it
    // sort it using a custom sort function
    prices.sort(function(a, b) {
        return(a.price - b.price);
    });
    // now pull each row out and put it at the beginning
    // starting from the end of the prices list
    var productList = $("#productList");
    for (var i = prices.length - 1; i >= 0; i--) {
        var self = $(prices[i].row);
        self.detach();
        productList.prepend(self);        
    }
});
  

И jsFiddle, который показывает это в действии: http://jsfiddle.net/jfriend00/vRdrA /.

Я сделал крошечный jQueryPlugin из ответа jfriend00:

 (function($){
   $.fn.sortChildrenByDataKey = function(key, desc){
      var i, els = this.children().sort(function(a, b) {return (desc?1:-1)*($(a).data(key) - $(b).data(key));});
      for (i = 0; i < els.length; i  ) {
          this.prepend($(els[i]).detach());
      }
      return this;
  };
})(jQuery);
  

Ваш HTML:

 <div id="myContainer">
  <div data-myKey="4"> ... </div>
  <div data-myKey="2"> ... </div>
  ...
</div>
  

Использование:

 $('div#myContainer').sortChildrenByDataKey('myKey', true_or_false);
  

Дочерними элементами контейнера могут быть любые элементы. Важно только то, что они являются непосредственными дочерними элементами и имеют ключ data-X.

Спасибо, jfriend00!!