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> |
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] event.stopPropagation() - 부모태그로 이벤트 전파 중지 (0) | 2015.01.24 |
|---|---|
| [jQuery] event.target - 중첩된 요소에 이벤트가 모두 걸려있을때 이벤트가 발생한 요소 확인 (0) | 2015.01.23 |
| [jQuery] $.each, $.inArray - 배열 중복값 제거 함수 (0) | 2015.01.06 |
| [jQuery] not($(this)) - this가 아닌요소 선택 (0) | 2015.01.04 |
| [jQuery] iframe 접근, 제어 (3) | 2015.01.01 |
