Переупорядочение div с помощью jQuery - PullRequest
Новая
       2

Переупорядочение div с помощью jQuery

0 голосов
/ 21 августа 2011

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

Сейчас: 

<div class="score" data-index="3">3</div>
<div class="score" data-index="2">2</div>
<div class="score" data-index="1">1</div>
<div class="score" data-index="4">4</div>

Что я хочу: 

<div class="score" data-index="1">1</div>
<div class="score" data-index="2">2</div>
<div class="score" data-index="3">3</div>
<div class="score" data-index="4">4</div>

Я полагаю, что это возможно с jQuery. Я иду каждый div и получаю номер индекса данных, но как мне сделать фактический порядок: D

Thx!

РЕДАКТИРОВАТЬ: одна вещь заключается в том, что порядок в HTML может варьироваться в зависимости от загрузки каждой страницы (порядок может 3,2,1,4 или 4,1,3,2 или что-нибудь).

И это единственный JS, который у меня сейчас есть: 

$("html .score").each(function(index, domEle) {
            var score = $(domEle).attr("data-index");
            alert(score);
        });

Просто получает номер индекса, предупреждает его.

Ответы [ 2 ]

4 голосов
/ 21 августа 2011

HTML 

<div class="sortable">
    <div class="score" data-index="3">3</div>
    <div class="score" data-index="2">2</div>
    <div class="score" data-index="1">1</div>
    <div class="score" data-index="4">4</div>
</div>

jQuery --------- по возрастанию 

$('.sortable').each(function(){
    var $this = $(this);
    $this.append($this.find('.score').get().sort(function(a, b) {
        return $(a).data('index') - $(b).data('index');
    }));
});

--------- по убыванию 

$('.sortable').each(function(){
    var $this = $(this);
    $this.append($this.find('.score').get().sort(function(a, b) {
        return $(b).data('index') - $(a).data('index');
    }));
});

Живая демоверсия

0 голосов
/ 21 августа 2011 
function sortDivs(a,b){  
    return $(a).data("index") > $(b).data("index") ? 1 : -1;  
};  


$(".score").sort(sortDivs).appendTo($("#results"));

Вот демо

...