jquery - Jquery - 按z-index从低到高列出div中的每个孩子

Question

我想通过 jQuery 列出 DIV 中的所有子项。但我需要通过 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');

工作演示