Можно ли отредактировать функцию jQuery, чтобы применить только к элементам li, у которых есть дети?

Когда ширина моего браузера ниже 1080px на моем сайте Wordpress, я настроил мобильное меню, содержащее неупорядоченный список, который настроен через PHP, а не HTML. У меня есть код jQuery ниже, который добавляет тег span после пунктов меню, чтобы я мог использовать его как средство переключения подменю. Проблема в том, что я хочу изменить его так, чтобы он добавлял только элементы списка, содержащие подстраницы.Можно ли отредактировать функцию jQuery, чтобы применить только к элементам li, у которых есть дети?

jQuery(document).ready(function($) {  

$('nav.main-menu#mobile ul li').after('<span class="submenu-button">+</span>'); 

});

У меня есть еще один вопрос, с этим - я уже дал для некоторых пунктов меню пользовательского класса (nav.main меню # мобильного li.hide-мобильный), так что я могу установить их на дисплей: ни когда меню меняется на мобильное меню с разрешением 1080 пикселей. JQuery также добавляет диапазон для них, и тот, который у меня есть на данный момент, имеет детей, поэтому диапазон предположительно останется, даже если у меня есть исправление для кода выше. Есть ли способ удалить диапазон для этого класса?

РНР мое меню использует:

function register_menus() { 
    register_nav_menus(
     array(
      'primary' => esc_html__('Primary Menu', 'theme_wp'),  
      'header' => __('Header Menu'), 
      'footer' => __('Footer Menu') 
     ) 
    ); 
} 
add_action('init', 'register_menus');

Мой заголовок выглядит следующим образом:

<header class="header"> 
    <div class="header-navigation"> 
     <!-- LOGOS --> 
     <a href="http://www.mywebsite.co.uk"> 
     <img class="standard logo" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/logo.png"> 
     <img class="white logo" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/logo_white.png"></a> 
     <!-- END LOGOS --> 
     <!-- HEADER NAVIGATION MENU --> 
     <nav class="main-menu" id="header"> 
      <div class="menu-header-menu-container"> 
       <ul id="menu-header-menu" class="menu"> 
        <li id="menu-item-1144" class="hide-desktop menu-item menu-item-type-post_type menu-item-object-page menu-item-1144"><a href="http://www.mywebsite.co.uk/home/">HOME</a></li> 
        <li id="menu-item-463" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-463"> 
         <a href="http://www.mywebsite.co.uk/work/">WORK</a> 
         <ul class="sub-menu"> 
          <li id="menu-item-584" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-584"><a href="http://www.mywebsite.co.uk/work/landscapes/">LANDSCAPES</a></li> 
          <li id="menu-item-473" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-473"> 
           <a href="http://www.mywebsite.co.uk/work/seascapes/">SEASCAPES</a> 
           <ul class="sub-menu"> 
            <li id="menu-item-478" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-478"><a href="http://www.mywebsite.co.uk/work/macro/">MACRO</a></li> 
            <li id="menu-item-477" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-477"><a href="http://www.mywebsite.co.uk/work/cities/">CITIES</a></li> 
           </ul> 
          </li> 
          <li id="menu-item-475" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-475"><a href="http://www.mywebsite.co.uk/work/long-exposure/">LONG EXPOSURE</a></li> 
          <li id="menu-item-480" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-480"><a href="http://www.mywebsite.co.uk/work/miscellaneous/">MISCELLANEOUS</a></li> 
         </ul> 
        </li> 
        <li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-10"><a href="http://www.mywebsite.co.uk/about/">ABOUT</a></li> 
        <li id="menu-item-464" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-464"><a href="http://www.mywebsite.co.uk/shop/">SHOP</a></li> 
        <li id="menu-item-923" class="hide-mobile menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-923"> 
         <a href="#">SOCIAL</a> 
         <ul class="sub-menu"> 
          <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a target="_blank" href="http://facebook.com/">FACEBOOK</a></li> 
          <li id="menu-item-924" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-924"><a href="#">INSTAGRAM</a></li> 
          <li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a target="_blank" href="https://www.mywebsite.co.uk/">FLICKR</a></li> 
         </ul> 
        </li> 
        <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="www.mywebsite.co.uk">CONTACT</a></li> 
       </ul> 
      </div> 
     </nav> 
     <!-- END HEADER NAVIGATION MENU --> 
     <span class="menu-button"></span> 
    </div> 
    <!--END HEADER NAVIGATION --> 
    <!-- MOBILE NAVIGATION MENU --> 
    <div class="mobile-menu"> 
     <nav class="main-menu" id="mobile"> 
      <h6 id="titleheading">MENU</h6> 
      <div class="menu-header-menu-container"> 
       <ul id="menu-header-menu-1" class="menu"> 
        <li class="hide-desktop menu-item menu-item-type-post_type menu-item-object-page menu-item-1144"><a href="http://www.mywebsite.co.uk/home/">HOME</a></li> 
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-463"> 
         <a href="http://www.mywebsite.co.uk/work/">WORK</a> 
         <ul class="sub-menu"> 
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-584"><a href="http://www.mywebsite.co.uk/work/landscapes/">LANDSCAPES</a></li> 
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-473"> 
           <a href="http://www.mywebsite.co.uk/work/seascapes/">SEASCAPES</a> 
           <ul class="sub-menu"> 
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-478"><a href="http://www.mywebsite.co.uk/work/macro/">MACRO</a></li> 
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-477"><a href="http://www.mywebsite.co.uk/work/cities/">CITIES</a></li> 
           </ul> 
          </li> 
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-475"><a href="http://www.mywebsite.co.uk/work/long-exposure/">LONG EXPOSURE</a></li> 
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-480"><a href="http://www.mywebsite.co.uk/work/miscellaneous/">MISCELLANEOUS</a></li> 
         </ul> 
        </li> 
        <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-10"><a href="http://www.mywebsite.co.uk/about/">ABOUT</a></li> 
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-464"><a href="http://www.mywebsite.co.uk/shop/">SHOP</a></li> 
        <li class="hide-mobile menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-923"> 
         <a href="#">SOCIAL</a> 
         <ul class="sub-menu"> 
          <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a target="_blank" href="http://facebook.com/">FACEBOOK</a></li> 
          <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-924"><a href="#">INSTAGRAM</a></li> 
          <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a target="_blank" href="www.mywebsite.co.uk">FLICKR</a></li> 
         </ul> 
        </li> 
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://www.mywebsite.co.uk/contact/">CONTACT</a></li> 
       </ul> 
      </div> 
     </nav> 
     <nav class="social-menu" id="mobile"> 
      <div class="menu-social-menu-container"> 
       <ul id="menu-social-menu" class="menu"> 
        <li id="menu-item-948" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-948"><a href="#"><img class="social icon grey" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/facebook_icon_grey.png" height=30 width=30> <img class="social icon black" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/facebook_icon_black.png" height=30 width=30> <img class="social icon white" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/facebook_icon_white.png" height=30 width=30></a></li> 
        <li id="menu-item-947" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-947"><a target="_blank" href="www.mywebsite.co.uk"><img class="social icon grey" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/instagram_icon_grey.png" height=30 width=30> <img class="social icon black" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/instagram_icon_black.png" height=30 width=30><img class="social icon white" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/instagram_icon_white.png" height=30 width=30></a></li> 
        <li id="menu-item-949" class="menu-item menu-item-type-c www.mywebsite.co.uk"><img class="social icon grey" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/flickr_icon_grey.png" height=30 width=30> <img class="social icon black" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/flickr_icon_black.png" height=30 width=30> <img class="social icon white" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/flickr_icon_white.png" height=30 width=30></a></li> 
       </ul> 
      </div> 
     </nav> 
    </div> 
    <!-- END MOBILE NAVIGATION MENU --> 
</header>

источник

2016-03-11 Jack1991

Вы должны быть в состоянии выполнить его с этим:

$('nav.main-menu#mobile ul li:not(.hide-mobile) ul').parent('li').after('<span class="submenu-button">+</span>');

It выберете каждый li, которые есть ul как child внутри mobile menu

источник

2016-03-12 00:07:13

Да, это сработало, спасибо! Вы знаете, как я могу заставить его игнорировать элементы списка, к которым я применил отдельный класс? Когда мой экран имеет полную ширину, у меня есть дополнительный пункт меню «social», в котором есть дети. Я дал ему класс - nav.main-menu # mobile li.hide-mobile - и я установил его для отображения: none; когда страница меньше 1080px, но в любом случае она придет с диапазоном и помещает ее рядом с одним из других элементов списка. – Jack1991

@ Jack1991 обновил ответ. добавлен фильтр ': not (.hide-mobile)' –

Отлично, спасибо вам большое :) – Jack1991

Можно ли отредактировать функцию jQuery, чтобы применить только к элементам li, у которых есть дети?

ответ

Смежные вопросы