How to find the highest z-index using jQuery

by

Note that z-index only affects positioned elements. Therefore, any element with position: static will not have a z-index, even if you assign it a value. This is especially true in browsers like Google Chrome.

var index_highest = 0;   
// more effective to have a class for the div you want to search and 
// pass that to your selector
$("#layer-1,#layer-2,#layer-3,#layer-4").each(function() {
    // always use a radix when using parseInt
    var index_current = parseInt($(this).css("zIndex"), 10);
    if(index_current > index_highest) {
        index_highest = index_current;
    }
});

JSFiddle demo

A general jQuery selector like that when used with an option that returns one value will merely return the first So your result is simply the z-index of the first div that jQuery grabs. To grab only the divs you want, use a class on them. If you want all divs, stick with div.

More Related Contents:

  1. Dropdown Z-index not responding [closed]
  2. Why is z-index ignored with position:static?
  3. jQuery Adding new option to select element doesn't pick up the string [closed]
  4. Slide down button to show text HTML CSS
  5. Bootstrap 3 Collapse show state with Chevron icon
  6. Add and remove a class on click using jQuery?
  7. css width: calc(100% -100px); alternative using jquery
  8. Number nested ordered lists in HTML
  9. Use jQuery/CSS to find the tallest of all elements [duplicate]
  10. How do I auto-hide placeholder text upon focus using css or jquery?
  11. Set width of a “Position: fixed” div relative to parent div
  12. How to make a hover effect for pseudo elements?
  13. What CSS3 selectors does jQuery really support, e.g. :nth-last-child()?
  14. Exporting PDF with jspdf not rendering CSS
  15. How to take id as selector when used hash?
  16. Get height of div with no height set in css
  17. auto resize text (font size) when resizing window?
  18. jQuery override default validation error message display (Css) Popup/Tooltip like
  19. What is the simplest jQuery way to have a ‘position:fixed’ (always at top) div?
  20. Can I fade in a background image (CSS: background-image) with jQuery?
  21. Getting the actual, floating-point width of an element
  22. Bootstrap 4 with remote Modal
  23. Animate an element’s width from 0 to 100%, with it and it’s wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery
  24. CSS for the “down arrow” on a element?
  25. How to create a diagonal line within a table cell?
  26. Show/ Hide Table Column with colspan using jQuery
  27. JQuery search in static HTML page with highlighting of found word
  28. The .fadeOut() method to use visibility property instead of display property
  29. Bootstrap Carousel showing next and previous image
  30. Possible to have a floating horizontal scrollbar?

Leave a Comment