Как упорядочить динамически созданные Div, используя jQuery на основе пользовательского атрибута TimeStamp? - PullRequest
Новая
       22

Как упорядочить динамически созданные Div, используя jQuery на основе пользовательского атрибута TimeStamp?

0 голосов
/ 20 мая 2011

У меня есть следующий код: 

var div = $("<div id='3.5'>AA</div>");
div_id_after = Math.floor(parseFloat(div.get(0).id));

$('#'+div_id_after).after(div);


<div id='1'>a</div>
<div id='2'>b</div>
<div id='3'>c</div>
<div id='4'>d</div>
<div id='5'>e</div>

Это даст div в следующем порядке:

а
б
с
AA
д * +1010 * е

Ясно, что неуместно использовать номер в качестве идентификатора для проблем совместимости IE / netscape, но потерпите меня.

Если у вас есть div, созданные с помощью пользовательского атрибута «order», где значением этого атрибута является метка времени: 

<div order='2011-05-13 15:57:09'>a</div>
<div order='2011-05-14 11:23:02'>b</div>
<div order='2011-05-19 10:12:11'>c</div>
<div order='2011-06-10 12:39:37'>d</div>
<div order='2011-06-12 13:47:17'>e</div>

И, как в приведенном выше коде, у вас есть элемент: 

var div = $("<div object='2011-05-19 17:46:21'>AA</div>");

Как бы вы заказали эти предметы, как в примере выше?

Ответы [ 2 ]

2 голосов
/ 20 мая 2011

Примерно так (предполагается, что есть родительский div, оборачивающий все ваши элементы, id'd 'контейнер'). 

$(document).ready(function(){
  $('#sort_me').click(doOrder);
});

function orderSort(a,b)
{
   return ($(a).attr('order') > $(b).attr('order')) ? 1 : -1;
}

function doOrder()
{
   var orderable = [];
   $('div[order]').each(function(idx,el){
      orderable.push(el);
   });
   orderable.sort(orderSort);
   for (var i=0; i < orderable.length;i++)
   {
        // Somewhat slow way of doing this.  Should be fine until you
        // get above 200 entries or so.  There are other ways which may 
        // be faster, but I thought this was good for explanation.
        $('#container').append(orderable[i]);
   }
}

добавлено:
Забыли добавить мою скрипку: http://jsfiddle.net/fUC2A/3/

0 голосов
/ 20 мая 2011

Я считаю, что это нестандартный формат даты, поэтому вам нужно как-то разобрать ... попробуйте что-то вроде этого: 

function resortDivs(){
        var divCon = $('#divContainer');
        var divArr = $('#divContainer').children('div').get();
        var div = $("<div order='2011-05-19 17:46:21'>AA</div>")[0]; 
        divArr.push(div);
        divArr.sort(function(a,b){
            var parse1 = customDate($(a).attr('order'));
            var parse2 = customDate($(b).attr('order'));
            return parse1 > parse2 ? 1 : -1; 
        });
        $.each(divArr, function(idx, itm) {divCon.append(itm);});
}
function customDate(date){
    var ymd = date.split(' ')[0];
    var hms = date.split(' ')[1];
    ymd = ymd.split('-');
    hms = hms.split(':');
    return  new Date(ymd[0],ymd[1],ymd[2],hms[0],hms[1],hms[2]);
}

Он получает все элементы в массив, сортирует массив с помощью пользовательской сортировки с использованием атрибута вашего заказа и затем снова добавляет их в контейнер.

Jsfiddle - похоже, работает.

...