jQuery centered inline logo in li

-Use first li as logo

by Roberto Apasajja

HTML

<ul id="zzz">
    <li>Home</li>
    <li>Shop</li>
    <li>About</li>
    <li>Blog</li>
    <li>Blog</li>
    <li>Account</li>
</ul>

CSS

ul, li {
    list-style: none;
}
li { 
    display: inline-block;
}

JavaScript

$(document).ready(function() {
    //$("ul#zzz").find("li:contains('Home')").hide();
    var position = $("ul#zzz li").length-1;
    var i = 0;
    $('ul#zzz li').each(function() {
        
        if ($('ul#zzz li').length %2 != 0){

            if(i == position/2) {
                $(this).after('<img src="https://picsum.photos/99" width="99" />');
            }
            i++;

        }else{
            if(i == ( position - 1 ) / 2 ) {
                $(this).after('<img src="https://picsum.photos/99" width="99" />');
            }
            i++;
        
        }

        
        
    });
});