WP 将徽标添加到菜单中心而忽略子菜单？答案

【问题标题】：WP add logo into center of menu whist ignoring sub menus?WP 将徽标添加到菜单中心而忽略子菜单？
【发布时间】：2016-08-22 12:50:39
【问题描述】：

使用下面的 jQuery 形成另一篇文章，我可以在 wordpress 菜单中间动态居中徽标，但是当我向主导航添加子菜单时，徽标消失了。我将如何重写这个来打折任何子菜单？

JQuery:

var position = $("ul#main_nav li").length-2;
                        var i = 0;
                        $('ul#main_nav li').each(function() {
                            if(i == position/2) {
                            $(this).after('<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="logo-img">');
                            }
                            i++;
                        });

HTML：

<ul id="#main_nav">
    <li>ITEM1</li>
    <li>ITEM2
        <ul class="sub-menu">
            <li>SUB-ITEM1</li>
            <li>SUB-ITEM2</li>
            <li>SUB-ITEM3</li>
        </ul>
    </li>
    <li>ITEM3</li>
    <li>ITEM4</li>
    <li>ITEM5</li>
    <li>ITEM6</li>
</ul>

【问题讨论】：

标签： javascript jquery wordpress

【解决方案1】：

var position = $("ul#main_nav > li").length-2;
                    var i = 0;
                    $('ul#main_nav li').each(function() {
                        if(i == position/2) {
                        $(this).after('<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="logo-img">');
                        }
                        i++;
                    });
    /* Try this */

【讨论】：

这已将徽标添加回列表中，但它出现在子菜单的中间？

【解决方案2】：

如果有任何其他人遇到此问题，这里是修复..

var position = $("ul#main_nav li.menu-item-object-page").length-2;
var i = 0;
    $('ul#main_nav li.menu-item-object-page).each(function() {
        if(i == position/2) {
        $(this).after('<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="logo-img">');
    }
 i++;
});

Wordpress 为顶级导航列表项提供 .menu-item-object-page 类，但不会将其应用于子菜单项，因此通过更具体地了解要定位的元素，我得到了我想要的结果。

【讨论】：