Заказать Divs на основе значения атрибута в Jquery

Question

У меня есть несколько дивы, как этот

<div rel="5"> 
    Divs content goes here 
</div> 
<div rel="3"> 
    Div 3 Here 
</div> 
<div rel="4"> 
    Div 4 Here 
</div> 
<div rel="4.5"> 
    Div 4.5 here 
</div> 

Как бы вы использовать Jquery для сортировки дивы так, что физически в DOM они сортируются с наименее отн атрибут первого?

например. 3, 4, 4.5, 5

Answer 1

Просмотреть мою скрипку: http://jsfiddle.net/6hpNz/8/

Вы можете использовать комбинацию Javascript и JQuery, чтобы сделать это довольно легко:

Учитывая следующий HTML:

<div class="unsorted"> 
    <div rel="5"> 
     Div 5 here 
    </div> 
    <div rel="3"> 
     Div 3 Here 
    </div> 
    <div rel="4.5"> 
     Div 4.5 here 
    </div> 
    <div rel="4"> 
     Div 4 Here 
    </div> </div> 
<div class="sorted"></div> 

Этот сценарий даст вам желаемый результат:

$(document).ready(function() { 
    var sortedDivs = $(".unsorted").find("div").toArray().sort(sorter); 
    $.each(sortedDivs, function (index, value) { 
     $(".sorted").append(value); 
    }); 
}); 

function sorter(a, b) { 
    return a.getAttribute('rel') - b.getAttribute('rel'); 
}; 

Answer 2

Вы можете выбрать элементы с помощью метода DOM, преобразовать список DOM в Array, а затем использовать Array.sort().

Answer 3

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

HTML:

<div rel="5"> 
     Divs content goes here 
    </div> 
    <div rel="3"> 
     Div 3 Here 
    </div> 
    <div rel="4"> 
     Div 4 Here 
    </div> 
    <div rel="4.5"> 
     Div 4.5 here 
    </div> 

JQuery:

var array = new Array(); 

$('div').each(function(){ 
    array.push($(this).attr('rel')); 
}); 

array = array.sort(); 

var reordedDivs = ""; 

$.each(array, function(i, obj1){ 

    $('div').each(function(j, obj2) { 

     if ($(obj2).attr('rel') == obj1) { 

      var divContent = $(obj2).html(); 
      var rel = obj1; 

     reordedDivs += "<div rel='" + rel + "'>" + divContent + "</div>"; 

     } 

      }); 
}); 

$('body').html(reordedDivs); 

Fiddle: http://jsfiddle.net/F6csV/17/