0

私のメニューは、以下のような 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

スクリプトでクラスをメニュー項目に追加できないのはなぜですか? ドロップダウン メニューを 2 列のメガ メニュー スタイルのものに変換しようとしています。

動的コンテンツへのクラスの追加が機能しない理由を理解してください。ただし、html を直接追加すると機能しますか? 例: http://jsbin.com/iHaqihI/1/edit

4

2 に答える 2

1

元のコードでは、「{」タグを見逃し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" />');
                }
            }
        });

});

フィドル

于 2013-10-11T16:34:36.177 に答える
1

それは単なるロードシーケンスの問題です。jQuery は DOM の準備ができたときに起動しますが、JavaScript によって追加されているため、おそらくナビゲーションが追加される前です。クラスを追加する前に、その追加をドキュメント準備機能に移動した場合、それは機能するはずです。この更新されたフィドルを参照してください。

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

また、すべてのロジックを head セクションから body に移動して、ブロックしないようにしました。基本的に、私がしたことは、ドキュメント準備機能を以下に変更することでした:

 $(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/を参照してください。

于 2013-10-11T16:42:54.410 に答える