Jquery - list all children in a div at z-index from lowest to highest
I want to list all child elements in a DIV using jQuery. But I need to order these kids by z-index. From lowest to highest.
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') );
});
I need to get an ordered output like:
1b 1a 2 3a 3b 5b 5a 7 10
+3
source to share
1 answer
You can use:
function sort_li(a, b){
return (parseInt(a.style.zIndex,10)) > (parseInt(b.style.zIndex,10))
}
$(".container div").sort(sort_li).appendTo('.container');
Working demo
+3
source to share