如何使用jQuery修改现有元素style属性中的z-index数值

问题原因 #

• 选择器错误：第一个尝试的代码中.pp-advanced-menu--dropdown和[style]之间多了空格，变成了匹配该元素的后代节点，无法选中目标nav元素
• 执行时机错误：代码没有等待DOM加载完成就执行，此时目标元素还未渲染到页面中，选择器返回空集合自然不生效
• 属性匹配容错率极低：[style="z-index: 999999;"]是严格全匹配，只要style属性里多了空格、换行、其他任意样式就会匹配失败

解决方法 #

方法1：CSS直接覆盖（最推荐，性能最高） #

直接在主题的自定义CSS面板、style.css文件或者footer.php的<head>标签内加入以下样式即可，优先级高于行内样式：

.pp-advanced-menu--dropdown {
    z-index: 999 !important;
}

方法2：修复后的jQuery代码 #

如果一定要用JS实现，将以下代码放到footer.php的</body>标签之前即可，适配WordPress默认的jQuery无冲突模式，保证DOM加载完成后执行：

<?php // 若当前代码位置已经在PHP标签内，无需重复开启PHP标签，直接写下方script代码即可 ?>
<script>
jQuery(document).ready(function($) {
    // 直接选中目标类修改样式，不需要严格匹配style属性
    $('.pp-advanced-menu--dropdown').css('z-index', 999);
});
</script>

如果需要仅修改原本z-index为999999的元素，可以补充判断逻辑：

jQuery(document).ready(function($) {
    $('.pp-advanced-menu--dropdown').each(function() {
        if ($(this).css('z-index') == 999999) {
            $(this).css('z-index', 999);
        }
    });
});

内容的提问来源于stack exchange，提问作者isbe