添加類動態加載菜單

Question

我的菜單是通過使用Web服務構建返回的JavaScript，看起來象下面這樣：

strGlobalNav='<ul><li><a href="//testonline/" alt="test Online Main Page">testOnline</a></li><li><a href="//testonline/ec/" alt="Employee Center Site">Employee Center</a><ul><li><a href="//testonline/ec" alt="Employee Center Site">Employee Center</a></li><li><a href="//testonline/ec/awards" alt="Awards &amp; Recognition Site">Awards &amp; Recognition</a></li><li><a href="//testonline/hr/benefits" alt="Benefits Site">Benefits</a></li><li><a href="//testonline/hr/EERelations/Pages/Default.aspx" alt="Employee Relations">Employee Relations</a></li><li><a href="//testonline/hr/Employment/Pages/Default.aspx" alt="Employment">Employment</a></li><li><a href="//testonline/ec/training" alt="test University Site">test University</a></li><li><a href="//testonline/ec/healthandsafety" alt="Health &amp; Safety Site">Health &amp; Safety</a></li><li><a href="//testonline/sites/offices" alt="Office Locations Site">Office Locations</a></li><li><a href="//testonline/ec/travel" alt="Travel Site">Travel</a></li><li><a href="//testonline/ec/tso" alt="Total Service Organization">TSO</a></li><li><a href="//testonline/ec/vidconf" alt="Video Conferencing Services">Video Conferencing</a></li></ul></li></ul>'; document.getElementById('test-nav-wrapper').innerHTML = strGlobalNav; 

我需要添加類到子菜單對於具有<ul><li>內部父列表項的項目的。

這是我的導航。

<div class="globalNav"> 
    <div id="test-nav-wrapper"></div> 
</div> 

下面是實際的小提琴： http://jsbin.com/urIlAlO/1/edit

爲什麼我的腳本不能將類添加到菜單項。我正在嘗試將下拉菜單轉換爲兩個圓柱形的巨型菜單樣式。

請幫我理解爲什麼添加類到動態內容不起作用，但是，如果我直接添加html它的作品？示例：http://jsbin.com/iHaqihI/1/edit

Answer 1

這只是一個裝載順序問題。當DOM準備就緒時，jQuery會觸發，但可能在添加javascript之前添加了nav。如果在添加類之前將其添加到文檔就緒函數中，它應該可以工作。看到這個更新的小提琴。

http://jsbin.com/urIlAlO/8/

我也感動了所有的邏輯從頭部到人體那麼它的無阻塞。從本質上講，我所做的是改變你的文件準備功能如下：

$(function() { 
      var strGlobalNav='<ul><li><a href="//testonline/" alt="test Online Main Page">testOnline</a></li><li><a href="//testonline/ec/" alt="Employee Center Site">Employee Center</a><ul><li><a href="//testonline/ec" alt="Employee Center Site">Employee Center</a></li><li><a href="//testonline/ec/awards" alt="Awards &amp; Recognition Site">Awards &amp; Recognition</a></li><li><a href="//testonline/hr/benefits" alt="Benefits Site">Benefits</a></li><li><a href="//testonline/hr/EERelations/Pages/Default.aspx" alt="Employee Relations">Employee Relations</a></li><li><a href="//testonline/hr/Employment/Pages/Default.aspx" alt="Employment">Employment</a></li><li><a href="//testonline/ec/training" alt="test University Site">test University</a></li><li><a href="//testonline/ec/healthandsafety" alt="Health &amp; Safety Site">Health &amp; Safety</a></li><li><a href="//testonline/sites/offices" alt="Office Locations Site">Office Locations</a></li><li><a href="//testonline/ec/travel" alt="Travel Site">Travel</a></li><li><a href="//testonline/ec/tso" alt="Total Service Organization">TSO</a></li><li><a href="//testonline/ec/vidconf" alt="Video Conferencing Services">Video Conferencing</a></li></ul></li></ul>'; 
      $('#test-nav-wrapper').html(strGlobalNav); 
      //clean up the row of the mega menu. add css class to each element on bottom row. 
      //only if more than 7 elements. if more than 16, mm-3 
      jQuery('#test-nav-wrapper ul li ul').each(function(ulindex, ulele){ 
       $total = jQuery(this).children('li').size(); 
       if ($total <= 7) { 
        jQuery(this).addClass('mm-1'); 
       } 
       else { 
        $cols = Math.floor(($total)/8) + 1; 
        $remainder = $total % $cols; 
        $rows = Math.ceil($total/$cols); 
        jQuery(this).addClass('mm-' + $cols + ' total-' + $total + ' rem-'+$remainder); 

        jQuery(this).children().each(function(liindex, liele){ 
        //alert("total: "+$total+", remainder: "+ $mod+", ulindex: "+ulindex+", liindex: "+liindex); 

         jQuery(this).addClass('col-' + Math.floor((liindex/$total * $cols)+1)); 
         if((liindex+1) % $rows == 0) { 
          jQuery(this).addClass('last'); 
         } 
        }); 

        for (var colcount = 1; colcount<= $cols; colcount++){ 
         jQuery(this).children('.col-'+colcount).wrapAll('<div class="col" />'); 
        } 
       } 
      });   


}); 

更新：只是重讀你的問題，並注意到「我的菜單是通過使用Web服務構建的javascrip返回」。

在你的web服務生成的JS中，在你的jQuery中做一些事情。在進行檢查並添加課程之前，通過將菜單添加到導航欄中，開始準備就緒的功能。

$(function() { 
    $('#test-nav-wrapper').html(strGlobalNav); 
    //clas checking stuff here 
}) 

這應該對你很好。知道如何從Web服務獲取菜單也很好。如果它是同一個域中的服務，請考慮使用$ .ajax（），然後執行檢查並在成功函數中添加該類。見http://api.jquery.com/jQuery.ajax/

Answer 2

在原始代碼中，您錯過了「{」中的jQuery(document).ready(function()標記，這就是爲什麼它不在那裏工作！

 jQuery(document).ready(function() 
     { 
     //clean up the row of the mega menu. add css class to each element on bottom row. 
     //only if more than 7 elements. if more than 16, mm-3 
     jQuery('#test-nav-wrapper ul li ul').each(function(ulindex, ulele){ 
      $total = jQuery(this).children('li').size(); 
      if ($total <= 7) { 
       jQuery(this).addClass('mm-1'); 
      } 
      else { 
       $cols = Math.floor(($total)/8) + 1; 
       $remainder = $total % $cols; 
       $rows = Math.ceil($total/$cols); 
       jQuery(this).addClass('mm-' + $cols + ' total-' + $total + ' rem-'+$remainder); 

       jQuery(this).children().each(function(liindex, liele){ 
       //alert("total: "+$total+", remainder: "+ $mod+", ulindex: "+ulindex+", liindex: "+liindex); 

        jQuery(this).addClass('col-' + Math.floor((liindex/$total * $cols)+1)); 
        if((liindex+1) % $rows == 0) { 
         jQuery(this).addClass('last'); 
        } 
       }); 

       for (var colcount = 1; colcount<= $cols; colcount++){ 
        jQuery(this).children('.col-'+colcount).wrapAll('<div class="col" />'); 
       } 
      } 
     });   

}）;

Fiddle