簡化jQuery的目標CSS

Question

我目前使用下面的jQuery JavaScript的一些HTML附加到「移動菜單中的」類中的「禮」的標籤時，「子菜單中的」類存在：

$('.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>'); 

任何幫助非常感謝！

感謝

Answer 1

您不必使用直接子選擇器（>）

用途：

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

Answer 2

試試這個，

// 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 like，

$('.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>');