javascript - 将类添加到动态加载的菜单

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>

这是实际的 fiddle : http://jsbin.com/urIlAlO/1/edit

为什么我的脚本无法将类添加到菜单项。我正在尝试将下拉菜单转换为两列大型菜单样式的内容。

请帮助我理解为什么向动态内容中添加类不起作用，但是，如果我直接添加 html 它有效吗？此处示例:http://jsbin.com/iHaqihI/1/edit

Answer 1

这只是一个加载顺序问题。 jQuery 在 DOM 准备就绪时触发，但可能在添加导航之前触发，因为它是由 javascript 添加的。如果您在添加类之前将该添加项移至文档就绪函数，它应该可以工作。请参阅此更新的 fiddle 。

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


});

更新:重新阅读您的问题并注意到“我的菜单是通过使用网络服务返回的 javascrip 构建的”。

在您的网络服务生成的 JS 之后，在正文中执行您的 jquery 操作。在进行检查和添加类之前，通过如下所示将菜单添加到导航栏来启动就绪功能。

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

这对你来说应该很好用。如果您知道如何从 Web 服务获取菜单，那将是一件好事。如果它是同一域上的服务，请考虑使用 $.ajax() 然后进行检查并将该类添加到您的成功函数中。参见 http://api.jquery.com/jQuery.ajax/