Javascript 将类添加到动态加载的菜单
我的菜单是通过使用web服务返回的javascript构建的,如下所示:Javascript 将类添加到动态加载的菜单,javascript,jquery,css,dom,megamenu,Javascript,Jquery,Css,Dom,Megamenu,我的菜单是通过使用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</
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 & Recognition Site">Awards & 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 & Safety Site">Health & 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;
strGlobalNav=
我需要将类添加到包含
的父列表项的子菜单项中
这是我的导航
<div class="globalNav">
<div id="test-nav-wrapper"></div>
</div>
这里是实际的小提琴:
为什么我的脚本无法将类添加到菜单项中。我正在尝试将下拉菜单转换为两列巨型菜单样式的东西
请帮助我理解为什么向动态内容添加类不起作用,但是,如果我直接添加html,它会起作用吗?这里的示例:在原始代码中,您在
jQuery(文档)中遗漏了“{”标记。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" />');
}
}
});
jQuery(文档).ready(函数()
{
//清理mega菜单的行。将css类添加到底部行的每个元素。
//仅当超过7个元素时。如果超过16,mm-3
jQuery('#test nav wrapper ul li ul')。每个(函数(ulindex,ulele){
$total=jQuery(this.children('li').size();
如果($total这只是一个加载顺序问题。当DOM准备好时,jQuery会触发,但可能在添加nav之前,因为它是由javascript添加的。如果在添加类之前将该添加移动到document ready函数中,它应该会起作用。请参阅此更新的fiddle
我还将所有逻辑从head部分移动到body部分,因此它是非阻塞的。基本上,我所做的是将您的document ready函数更改为以下内容:
$(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 & Recognition Site">Awards & 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 & Safety Site">Health & 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服务中获取菜单也是很好的。如果它是同一个域上的一个服务,考虑使用$.Ajax()。然后进行检查并在成功函数中添加类。请参见,这需要筛选大量代码。我发现慢慢删除不属于问题的元素非常有帮助,可以帮助我关注实际错误。这样做可以帮助您了解发生了什么,也可以帮助那些希望帮助您查看actu的人al目标和它的问题。我经常通过像你创建的JSFIDLE一样,慢慢删除不是问题关键的元素来进行排序。一个建议。问题不在那里,他只是错过了打开“{”在准备好的手工中,他的问题表明他在使用Web服务生成的菜单时有问题。我想他的例子显示了他所说的工作。YAE是它的一部分,但主要问题是,如果我从URL加载相同的JavaScript字符串,它就不起作用。这里是URL。考虑使用jQuery。Ajax()或jQuery。然后检查成功回调函数。这很奇怪,因为如果我从URL加载相同的javascript,它就不起作用。下面是URL:这一点也不奇怪,因为你可能试图在元素到达DOM之前操纵它们。如果你用Ajax加载javascript,你应该在AjaxHA中完成所有操作恩德勒
$(function() {
$('#test-nav-wrapper').html(strGlobalNav);
//clas checking stuff here
})