childNodes.length 0 в Chrome / исправить в 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 2-й цикл 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

});

или получит все дочерние элементы селектора, как указано Патриком

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

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

});

Источник: здесь для петель