Jquery - перечислить каждого потомка в div по z-index от нижнего к высшему

Question

Я хочу перечислить всех детей в DIV по jQuery. Но мне нужно заказать это детей по z-index. От низшего к высшему.

Пример jsFiddle

HTML

<div class="container">
    <div style="z-index: 1; ">1b</div>
    <div style="z-index: 10;">10</div>
    <div style="z-index: 3;">3a</div>
    <div style="z-index: 5;">5b</div>
    <div style="z-index: 7;">7</div>
    <div style="z-index: 2;">2</div>
    <div style="z-index: 3;">3b</div>
    <div style="z-index: 5;">5a</div>
    <div style="z-index: 1;">1a</div>
</div>

JQuery

$('.container').children().each(function () {
    alert( $(this).css('z-index') );
});

Мне нужно получить упорядоченный вывод, как:

1b
1a
2
3a
3b
5b
5a
7
10

Answer 1

Ты можешь использовать:

function sort_li(a, b){
  return (parseInt(a.style.zIndex,10)) > (parseInt(b.style.zIndex,10)) 
}

$(".container div").sort(sort_li).appendTo('.container');

Рабочая Демо