CODEWITHSUNDEEP
jqueryz-indexeachhighest
Patrik
Patrik

Reputation: 1327

Jquery - list each children in div by z-index from lower to highest

I want to list all children in DIV by jQuery. But I need order this children by z-index. From lower to highest.

jsFiddle Example

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 ordered output like :

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

Upvotes: 3

Views: 609

Answers (1)

Milind Anantwar
Milind Anantwar

Reputation: 82241

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

Upvotes: 2

Related Questions