jQuery
[jQuery][사용자함수] $.fn.higherLayer - 확장집합에서 z-index가 가장 높은 요소 선택
힘없는염소
2015. 1. 6. 14:28
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <style> .box { width:40px; height:40px; } </style> <script src="js/jquery.js"></script> </head> <body> <div class="box" style="position: absolute; top:50px; left:50px; z-index: 2; background: red"></div> <div class="box" style="position: absolute; top:150px; left:350px; z-index: 4; background: green" ></div> <div class="box" style="position: absolute; top:330px; left:450px; z-index: 50; background: #000"></div> <div class="box" style="position: absolute; top:230px; left:150px; z-index: 15; background: pink"></div> <div class="box" style="position: absolute; top:150px; left:250px; z-index: 4; background: blue"></div> <div class="box" style="position: absolute; top:550px; left:450px; z-index: 1; background: skyblue"></div> <div class="box" style="position: absolute; top:350px; left:220px; z-index: 3; background: orange"></div> <script> //확장집합에서 가장 z-index가 가장 높은 요소 선택....jquery 메서드를 만듬 $.fn.higherLayer = function () { var sortZindex = $(this).sort(function (a, b) { return parseInt(a.style.zIndex) - parseInt(b.style.zIndex); }); console.log(sortZindex[0]); console.log(sortZindex[1]); console.log(sortZindex[2]); console.log(sortZindex[3]); console.log(sortZindex[4]); console.log(sortZindex[5]); console.log(sortZindex[6]); //z-index를 기준으로 정렬된 마지막요소(z-index가 가장높은 요소) 반환 return sortZindex.last(); }; console.log($('.box').higherLayer()); </script> </body> </html> |
반응형