Chrome의 childNodes.length 0/IE 및 FF의 올바른 번호

Question

특정 링크를 찾기 위해 크롤링해야하는 하위 항목이 있습니다.

<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> 

내가 IE/파이어 폭스에서 잘 작동이 자바 스크립트는하지만, 크롬 실패 :

는

 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++;     
     } 
    } 

크롬에서 루프 2는 Menu.length는 없다 실행한다 결코 때문에 HTML은 너무처럼 보인다 제로. 내부 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

에 대한 here이 당신의 모든 기능을 대체 :

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 
      } 
     }) 
    }); 
} 

의 첫 번째 매개 변수함수는 0부터 시작하는 인덱스입니다. Tab을 제공함으로써 그것을 계산합니다.

Answer 2

당신은 jQuery를 사용하는 것이 좋습니다.

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

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

}); 

또는 패트릭에 의해 지적이 선택기의 모든 어린이 된 div를 얻을 수

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

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

}); 

출처 : 내가 제대로 코드를 이해한다면 루프