добавить класс динамически загружен меню

Question

Мое меню строится потребляя веб-сервис возвращается 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

Это просто вопрос загрузки последовательности. Вы запускаете jQuery, когда DOM готов, но, вероятно, до того, как добавляется nav, поскольку он добавляется javascript. Если вы добавили это дополнение к функции готовности документа перед добавлением класса, оно должно работать. Смотрите эту обновленную скрипку.

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" />'); 
        } 
       } 
      });   


}); 

UPDATE: Просто перечитайте свой вопрос и заметил, "Мое меню строится потребляя веб-сервис вернулся JavaScrip.

Сделайте свой материал jquery в теле и наслаждайтесь JS, созданным вашим веб-сервисом. начните свою готовую функцию, добавив меню в навигационное меню, как показано ниже, перед выполнением проверки и добавлением классов.

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

Это должно хорошо работать для вас. Также было бы неплохо узнать, как вы получаете меню из веб-сервиса. Если это служба в том же домене, рассмотрите возможность использования $ .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