Получение наибольшего значения Z-Index с использованием jQuery.live, чтобы обеспечить ВСЕ рассматриваемые элементы

Question

С риском получить ответ, что это повторяющийся вопрос, я пытаюсь выяснить, как получить наибольшее значение z-Index из всех элементов div на странице, ВКЛЮЧАЯ те, которые были созданы jQuery.

Ситуация такова, что у меня есть div всплывающей подсказки, который находится вверху страницы и заполняется onMouseover или onClick jQuery на основе элемента триггера.

У меня есть скрытый div, который onClick вызывающего элемента отображается в окне стиля Lightbox, которому jQuery присваивает z-индекс. Мне нужно иметь возможность вызвать всплывающую подсказку onMouseover из элемента в этом элементе div, но в данный момент он отображается за ним.

Очевидно, что я мог бы сделать это вручную, но для будущего использования я думал, что вычисленный метод будет лучше ...

Погуглил меня, как обычно, до ТА к этой статье Как определить самый высокий z-индекс в документе?

Из которого я нашел

function findHighestZIndex(elem) {
    var elems = document.getElementsByTagName(elem);
    var highest = 0;
    for (var i = 0; i < elems.length; i++) {
        var zindex = document.defaultView.getComputedStyle(elems[i], null).getPropertyValue("z-index");
        if ((zindex > highest) && (zindex != 'auto')) {
            highest = zindex;
        }
    }
    return (highest * 1);
}

Что отлично работает для элементов, которые явно задали z-Indexes с помощью CSS.

Тем не менее, не показывается / заполняется элементами div с помощью jQuery.

Приведенная выше функция игнорирует это модальное окно, предположительно потому, что z-Index создается программно?

Я нашел эту функцию также на SO

function getMaxZIndex() {
    var zIndexMax = 0;
    $('div').each(function () {
        if ($(this).css('z-index') > zIndexMax) zIndexMax = $(this).css('z-index');
    });
    return (zIndexMax * 1);
}

Но по какой-то причине это возвращает 'NAN'

Я думаю, что мне нужно использовать «live» где-то здесь, но не знаю, как это сделать.

Еще раз прошу прощения, если кто-то считает, что это дублирующий вопрос, но вопросы, которые я нашел здесь, не совсем отвечают на этот вопрос.

Answer 1

.css ('z-index') возвращает string

'100' > 0 //true
'auto' > '100' //true

в результате zIndexMax, скорее всего, будет 'auto', а 'auto' * 1 - NaN

попробуйте это

function getMaxZIndex() {
    var zIndexMax = 0;
    $('div').each(function () {
        var z = parseInt($(this).css('z-index'));
        if (z > zIndexMax) zIndexMax = z;
    });
    return zIndexMax;
}

Answer 2

Хотя вопрос уже довольно старый, у меня была похожая проблема, и я хотел отметить, что в ядре jQuery UI теперь есть метод zIndex , который кажется более удобным (учитывая, что вы можете использовать интерфейс jQueryядро).Вам все равно придется перебирать элементы, но больше не нужно разбирать их.

Answer 3

Просто один на один. Если вы используете браузер на основе Webkit (например, Chrome, Safari), $(element).css('z-index') ВСЕГДА будет возвращать строку auto, а element.style.zIndex НИКОГДА не будет возвращать что-либо , если выбранный элемент также не имеет явный position стиль CSS. Итак, в дополнение к советам, предоставленным @ W.T. выше, обязательно объявите CSS position для любого элемента, чей z-index вы хотите надежно прочитать в числовое значение с помощью JavaScript.