在 Chrome 中 childNodes.length 0 / 在 IE 和 FF 中更正

Question

我有一个带有孩子的 div，我需要抓取它以查找特定链接。 HTML 看起来像这样：

<div id="ctl00_LeftNav">
    <h3>
        <a href="../App_Templates/#" rel="0">Menu 1</a></h3>
    <div>
        <p>
            <span>
                <div style="padding-left: 0px; font-weight: bold;">
                    <a href="javascript:OnLeftMenuSelection(1);">Opt 1</a></div>
                <div style="padding-left: 10px;">
                    <a href="javascript:OnLeftMenuSelection(56);">Opt 1a</a></div>
                <div style="padding-left: 0px; font-weight: bold;">
                    <a href="javascript:OnLeftMenuSelection(2);">Opt 2</a></div>
            </span>
        </p>
    </div>
    <h3>
        <a href="../App_Templates/#" rel="1">Menu 2</a></h3>
    <div>
        <p>
            <span>
                <div style="padding-left: 0px; font-weight: bold;">
                    <a href="javascript:OnLeftMenuSelection(33);">Opt 1</a></div>
                <div style="padding-left: 0px; font-weight: bold;">
                    <a href="javascript:OnLeftMenuSelection(34);">Opt 2</a></div>
                <div style="padding-left: 10px;">
                    <a href="javascript:OnLeftMenuSelection(42);">Opt 2a</a></div>
            </span>
        </p>
    </div>
    <h3>
        <a href="../App_Templates/#" rel="2">Menu 3</a></h3>
    <div>
        <p>
            <span>
                <div style="padding-left: 0px; font-weight: bold;">
                    <a href="javascript:OnLeftMenuSelection(58);">Opt 1</a></div>
                <div style="padding-left: 0px; font-weight: bold;">
                    <a href="javascript:OnLeftMenuSelection(59);">Opt 2</a></div>
            </span>
        </p>
    </div>
</div>

我的 Javascript 在 IE / Firefox 中运行良好，但在 Chrome 中失败：

        function OnPageLoadCategorySelect(Category) {            
        var Root = $j('#ctl00_LeftNav').children();
        var Tab = 0;
        for (var i = 1; i < Root.length; i += 2) {
            var Menu = Root[i].firstChild.firstChild.childNodes;                
            var MenuLength = Menu.length;
            for (var j = 0; j < Menu.length; j++) {
                var Link = Menu[j].innerHTML;
                var Start = Link.indexOf('(');
                var End = Link.indexOf(')');
                var Res = Link.slice(Start + 1, End);
                if (Res == Category) {
                    SelectedTabIndex = Tab;                        
                    OnLeftMenuSelection(Category);
                    $j('#ShopTabs').show();
                    $j('#ctl00_LeftNav').accordion('activate', Tab);                      
                    return;
                }
            }                
            Tab++;                
        }
    }

在 Chrome 中，第二个 for 循环永远不会执行，因为 Menu.length 为零。获得这些内部 div 的最佳方法是什么？

解决方案

function OnPageLoadCategorySelect(Category) {
$j("#ctl00_LeftNav > div").each(function(Tab, el) {
            $j('a', this).each(function() {
                var id = $j(this).attr('href').replace('javascript:OnLeftMenuSelection(', '').replace(');', '');
                if (id == Category) {
                    SelectedTabIndex = Tab;
                    OnLeftMenuSelection(Category);
                    $j('#ShopTabs').show();
                    $j('#ctl00_LeftNav').accordion('activate', Tab);
                    return false; // exit the loop
                }
            })
        });
 }

Answer 1

如果我正确理解您的代码，请将您的整个函数替换为：

function OnPageLoadCategorySelect(Category) {
  $j("#ctl00_LeftNav > div").each(function(Tab, el){
      $j('a', this).each(function(){
          var id = $j(this).attr('href').replace('javascript:OnLeftMenuSelection(','').replace(')','');
          if( id == Category ) {
              SelectedTabIndex = Tab;                        
              OnLeftMenuSelection(Category);
              $j('#ShopTabs').show();
              $j('#ctl00_LeftNav').accordion('activate', Tab);                      
              return false; // exit the loop
          }
      })
  });
}

each 函数的第一个参数是从零开始的索引。通过提供 Tab，它会为您计算。

Answer 2

你应该考虑使用 jQuery。

$('#ctl00_LeftNav').children("div").each(function(index) {

   alert(index + ': ' + $(this).text()); // displays inner text of div

});

或者这会得到选择器的所有子 div，正如 patrick 所指出的那样

$('#ctl00_LeftNav > div').each(function(index) {

   alert(index + ': ' + $(this).text()); // displays inner text of div

});

来源：here for 循环