2011-09-09 7 views
0
<body> 
    <ul class="outer"> 

     <li>This is info for Chino in Reno</li> 
     <li> 
      <ul class="inner"> 
       <li>This is info for Chino in Reno</li> 
      </ul> 
     </li> 
     <li> 
      <ul class="inner"> 
       <li>This is info for Chino in Reno</li> 
      </ul> 
     </li> 
     <li>This is info for Chino in Reno</li> 
     <li> 
      <ul class="inner"> 
       <li>This is info for Chino in Reno</li> 
      </ul> 
     </li> 
     <li>This is info for Chino in Reno</li> 
    </ul> 
    </body> 

<script type="text/javascript"> 
    var items = document.getElementsByClassName("outer");//ul = "outer" 
    for (i = 0, ii = items.length; i < ii; i++)// go through the children "outer" 
    { 
     var outer_list = items[i].getElementsByTagName("li"); 

     for (j = 0, jj = outer_list.length; j < jj; j++) 
     { 
      if(outer_list[j].childNodes)// want to get nested li < ul 
      { 
       outer_list[j].className = "style2"; // style it green 
      } 
      else 
      { 
       outer_list[j].className = "style"; // style it red 
      } 
     };// end for loop 
    }; 

私はこのコードをulの中でul内で実験して拡張しようとしています!ulがulのdom内のナビゲーションコード内にちょっと残っています

私は文が音ではない場合、私は間違ってchildNodeメソッドを持っているような気がしますか?

おそらくこれは良いだろうが、私はかなりそれを書き出す方法がわからない:

場合(outer_list [J] .hasChildNodes == true)を

任意の提案ですか?

答えて

1

あなたが実際にあなたの望ましい結果が何であるか言っていない、または間違った何が起こっているか、私はあなたがこの行を見つけることだと思う:

var outer_list = items[i].getElementsByTagName("li"); 

getElementsByTagName()がすべて返されますので、あなたが何を考えてやっていません直接の子だけでなく、指定されたタグに一致する子孫。

if(outer_list[j].childNodes.length > 0) 

注:CSSセレクタは、ネストされたリストのこれらのタイプを扱うことができ、あなたの意図を想定し、それがchildNodesを使用して言及文は要素が子がこれにそれを変更してみてください持っているかどうかをテストする場合について

JavaScriptを必要としません。

+0

nnnnnn、それを指摘してくれてありがとう! – nick

+0

ここに私の頭に欲しいものの擬似コードがあります: 1.最初のul を取得します。2.子をループして、子も持っているliを確認します。 3.子供がいる場合、その子供の李を取得し、別のスタイル。 – nick

0

nnnnnnによると、CSSを使用できます。これは、文書構造のresonably独立しすることができ、(DIV上記のような)すべてのULに関して、異なる構造上で動作する任意のスクリプト、例えば:

<style type="text/css"> 
    ul { background-color: blue;} 
    ul ul { background-color: green;} 
    ul ul ul { background-color: red;} 
</style> 

<ul> 
    <li>This one is blue 
    <ul> 
     <li>This one is green 
     <div>Intervening element 
      <ul> 
      <li>This one is red 
      </ul> 
     </div> 
    </ul> 
    <li>Another blue one 
</ul> 

を必要としません。スクリプトでそれを行う方法はありますが、CSSメソッドが適切でない場合に限ります。

関連する問題