Chọn DIV với z-index

Question

đang

Ví dụ cao nhất vì vậy tôi có thể bắt đầu giải thích vấn đề này:

<div style="z-index:5">5</div> 
<div style="z-index:2">2</div> 
<div style="z-index:1">1</div> 
<div style="z-index:4">4</div> 
<div style="z-index:3">3</div> 

(. Z-index giá trị không quan trọng, và thứ tự của chúng, thậm chí ít hơn Chỉ cần ví dụ code)

Vấn đề: Tôi muốn chọn (hoặc sử dụng CSS hoặc JS với jQuery) DIV với giá trị z-index cao nhất. Trong trường hợp trên, tôi muốn chọn cái đầu tiên, bởi vì nó là z-index 5 cao hơn tất cả các chỉ mục z của người khác.

Có cách nào để thực hiện việc này không? Thông tin bổ sung: Tôi đang viết Trình quản lý cửa sổ đơn giản với jQuery + jQuery UI và chỉ mục z được chỉ định bởi tùy chọn ngăn xếp trong .draggable. Tôi dường như không thể tìm cách để làm cho jQuery chỉ định phần tử kéo cuối cùng một lớp, vì vậy tôi sẽ đi theo chỉ mục z-index cao nhất. Bất kỳ giúp đỡ xin vui lòng? Cảm ơn.

Answer 1

tôi chắc chắn rằng bạn có thể sử dụng các sự kiện ngừng để đạt được quyền truy cập vào các mục gần đây kéo, ví dụ:

$('.selector').draggable({ 
    stop: function(event, ui) { 
     $(event.target).addClass('justDragged'); 
    } 
}); 

Nếu bạn muốn xem tất cả các hàm/biến được liên kết với sự kiện, bạn có thể sử dụng như sau:

var str = ''; 
for (i in event) { 
    str += i + ', '; 
} 
alert(str); 

Điều này sẽ cho bạn một dấu hiệu tốt về những gì có sẵn cho bạn trong bất kỳ số tham số gọi lại jQuery nào.

Answer 2

Bạn luôn có thể thử nghiệm với jQuery(".yourDivs").css("z-index") sau khi bạn đã thêm lớp học vào tất cả các div của mình.

Answer 3

Ở vị trí của bạn, tôi chỉ cần đính kèm sự kiện onclick trên mỗi div. Tôi nghĩ rằng sau đó Javascript hoặc jQuery sẽ tự động đưa vào tài khoản thông tin zindex và bạn sẽ nhận được sự kiện chính xác trên DIV nơi bạn nhấp vào.

Answer 4

Hãy thử ở đây:

How can you figure out the highest z-index in your document?

Answer 5

Tôi đã chỉ ra rằng có sự kiện 'bắt đầu kéo' trong .draggable. Tôi thật ngốc nghếch.

 
$("#window-"+id+".staticwindow.stwin").draggable({ 
... 
    start: function(e, u){ 
     $(".window").removeClass('active'); 
     $(this).addClass('active'); 
    } 
}); 

Mặc dù phương pháp này của tôi không liên quan đến câu hỏi ban đầu của tôi nữa, ít nhất không có vòng lặp. Tôi sẽ không chấp nhận bất kỳ câu trả lời nào vì điều này dường như cần một vòng lặp. (Mặc dù tôi hơi nghiêng chấp nhận câu trả lời bởi zarko-o vì nó dẫn tôi đến suy nghĩ về các sự kiện)

Cảm ơn mọi người đã trả lời!