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

Question

I want to list all children in DIV by jQuery. But I need order this children by z-index. From lower 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 ordered output like :

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

Milind Anantwar · Accepted Answer · 2015-07-18T09:46:25.673

2

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

edited Jul 18 '15 at 09:46

answered Jul 09 '15 at 12:47

Milind Anantwar

81,290
25
94
125

Thank you for your help, but I don't understand how to use this. Please, can you make jsfiddle example ? Thank you. :) – Patrik Jul 09 '15 at 12:53
Please , can you update with jsfiddle ? Thank you :) – Patrik Jul 11 '15 at 14:11
1

@Patrik: hey patric. sorry i forgot to put the fiddle. sure will update in morning – Milind Anantwar Jul 12 '15 at 16:49
1

Please, it is important for me :-) – Patrik Jul 17 '15 at 12:47
1

@Patrik:hey. sorry for the late update. i was busy with some other work so couldnt come on SO. check the fiddle. – Milind Anantwar Jul 18 '15 at 09:48
@GDY: Depends on the HTML you have. Please post a new question for same. – Milind Anantwar Jul 30 '19 at 12:14
You cannot vanilla sort jquery objects. You have to convert the jquery result with get into a vanilla array and then fire the sort. Your "working demo" just doesn't work ;) – GDY Jul 30 '19 at 12:30

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

1 Answers1

Working Demo