Как изменить z-индекс пунктов списка в меню с помощью jQuery?

Question

Я делаю длинное меню для темы WordPress, и оно появляется в два ряда. Проблема в том, что подменю верхней строки появляется под элементами списка в нижней строке. Мое решение состоит в том, чтобы изменить z-индекс, но я не знаю, сколько элементов будет в меню, поэтому я использую jQuery. Вот код, но он не работает. Не могли бы вы помочь?

jQuery(document).ready(function ($) {
    var items;
    items=jQuery(".menu>ul>li").length;

    for (var i=0; i<items; i++){
        jQuery(".menu>ul>li").css("z-index", function( items, i ){
            return items - i;
        });
    }

},"jQuery");

Answer 1

Если вы хотите перевернуть список, вы можете использовать:

var list = $('.menu>ul');
var items = list.children('li');
list.append(items .get().reverse());

Это обратит порядок, поэтому 1,2,3 становится 3,2,1. z-index относится к порядку отображения с точки зрения визуального "наслоения".

CSS-свойство z-index определяет z-порядок элемента и его потомков. Когда элементы перекрываются, z-порядок определяет, какой из них покрывает другой. Элемент с большим z-индексом обычно покрывает элемент с более низким.

Если вы хотите повернуть вспять z-index ты можешь использовать:

var num= $('.menu>ul>li').length; /* or suitably high number depending on your layout */
$('.menu>ul>li').each(function(i, item) {
    $(item).css('z-index', num - i);
});