简化 jQuery 目标 CSS

Simplify jQuery target CSS

本文关键字：CSS 目标 jQuery 简化      更新时间：2023-09-26

当"子菜单"类存在时，我目前正在使用以下jQuery JavaScript将一些HTML附加到"mobile-menu"类内的"li"标签中：

$('.mobile-menu > li:has(ul.sub-menu)').append('<div class="menu-expand"><i class="fa fa-plus"></i></div>');

我想将其应用于所有 li 标签，无论它们埋在里面有多远，我目前正在使用以下代码，它工作正常，但我确信一定有一种方法可以简化它？

$('.mobile-menu > li:has(ul.sub-menu)').append('<div class="menu-expand"><i class="fa fa-plus"></i></div>');
$('.mobile-menu > li li:has(ul.sub-menu)').append('<div class="menu-expand"><i class="fa fa-plus"></i></div>');
$('.mobile-menu > li li li:has(ul.sub-menu)').append('<div class="menu-expand"><i class="fa fa-plus"></i></div>');
$('.mobile-menu > li li li li:has(ul.sub-menu)').append('<div class="menu-expand"><i class="fa fa-plus"></i></div>');
$('.mobile-menu > li li li li li:has(ul.sub-menu)').append('<div class="menu-expand"><i class="fa fa-plus"></i></div>');
$('.mobile-menu > li li li li li li:has(ul.sub-menu)').append('<div class="menu-expand"><i class="fa fa-plus"></i></div>');

任何帮助非常感谢！

谢谢

您不必使用直接子选择器 （ > ）

用：

$('.mobile-menu li:has(ul.sub-menu)').append('<div class="menu-expand"><i class="fa fa-plus"></i></div>');

试试这个，

// to append all ul having sub-menu class
if($('.mobile-menu > li ul.sub-menu').length) {
   $('.mobile-menu > li ul.sub-menu')
       .append('<div class="menu-expand"><i class="fa fa-plus"></i></div>');
}

如果有 ul-li-ul 的嵌套，则使用 ：nth-last-child-selector，例如，

$('.mobile-menu > li ul.sub-menu:nth-last-child(0)') // for the last selector
       .append('<div class="menu-expand"><i class="fa fa-plus"></i></div>');
相关文章：