jQuery: can't replace LI.after with IMG

From this answer, I attempted to replace the <LI>Logo</LI> with an IMG on a Wordpress website, see: Jsfiddle.

However, the replacement is not occurring.

Help appreciated.

HTML:

<ul id="menu-header-menu" class="genesis-nav-menu"><li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-11 current_page_item menu-item-104"><a href="http://vmpersonal.com/" itemprop="url">Home</a></li>
<li id="menu-item-109" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-109"><a href="/shop" itemprop="url">Products &amp; Services</a></li>
<li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a href="http://vmpersonal.com/blog/" itemprop="url">Blog</a></li>
<li id="menu-item-110" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-110"><a href="/" itemprop="url">Logo</a></li>
<li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106"><a href="http://vmpersonal.com/success-stories/" itemprop="url">Success Stories</a></li>
<li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107"><a href="http://vmpersonal.com/about/" itemprop="url">About</a></li>
<li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108"><a href="http://vmpersonal.com/contact/" itemprop="url">Contact</a></li>
</ul>

jQuery:

    jQuery(document).ready(function() {
        jQuery("ul#menu-header-menu").find("li:contains('Logo')").hide(); // hides home from navigation
        jQuery("ul#menu-header-menu").find("li:contains('Logo')").after('<img src="http://vmpersonal.com/wp-content/uploads/2017/02/Logo-1.png" width="124px" />');
    });

Answers 1

  • It looks like you are missing the jquery library, include it, and it should work.

    In general when you enqueue jQuery in Wordpress you must use jQuery, and $ is not used (this is for compatibility with other libraries).

    You will probably have to wrap the script in this function: (As per your comment that you use Wordpress)

    (function($){
    
        // jQuery code is in here
    
    })(jQuery);
    

Related Articles