Can this jQuery function be edited to only apply to li items that have children? in WordPress

When the browser width is below 1080px on my WordPress site, I’ve set up a mobile menu with containing an unordered list that is configured via PHP rather than HTML. I have some jQuery code below that adds a span tag after the menu items so that I can use it as a means of toggling sub menus. The problem is, I want to change it so that it only adds the span to list items that have subpages.

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

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

});

I also have another issue with this â I’ve given certain menu items a custom class (nav.main-menu#mobile li.hide-mobile) so that I can set them to display:none when the menu changes to the mobile menu at 1080px. The jQuery is adding a span for these too, and the one I have at the moment has children so the span will presumably will remain even if I have a fix for the code above. Is there a way of removing the span for this class?

The PHP my menu uses:

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' );

My header is as follows:

<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>

Post Views: 1

1 comment

Anonymous says:

June 16, 2023 at 8:38 pm
You should be able to accomplish it with this:
```
$('nav.main-menu#mobile ul li:not(.hide-mobile) ul').parent('li').after('<span class="submenu-button">+</span>');
```
It will select every li that have ul as a child inside mobile menu

Comments are closed.

Related posts

1 comment

Social Network