2016-08-22 105 views
0

使用以下jQuery形式的另一篇文章我可以在wordpress菜單的中間動態地居中放置一個徽標,但是當我向主導航添加一個子菜單時,徽標消失。我將如何重寫這個以打折任何子菜單?WP將徽標添加到菜單中心忽略子菜單?

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> 

回答

0
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 */ 
+0

這已將徽標添加到列表中,但它出現在子菜單的一半? – bigdave

0

萬一其他人遇到這個問題,這裏的修復..

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,但不適用於子菜單項,所以通過更具體地瞭解什麼elemnets目標我已經得到了我想要的結果。

相關問題