Question

    <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的内部试验并扩展这个代码的内容！

我觉得如果声明是事情不合理的地方，也许我错了childNode方法???

或许这会更好，但我不太清楚如何写出来：

if（outer_list [j] .hasChildNodes == true）

有什么建议吗？

Answer 1

你实际上没有说出你想要的结果是什么，或者出了什么问题，但我想你会发现这一行：

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

没有按照您的想法行事，因为getElementsByTagName()会返回与指定标记匹配的所有后代，而不仅仅是直接子代。

关于你提到的使用childNodes的if语句，假设你的目的是测试该元素是否有任何子元素，请尝试将其更改为：

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

注意：CSS选择器可以处理这些类型的嵌套列表而无需JavaScript。

Answer 2

正如nnnnnn所说，你可以使用CSS。它可以合理地独立于文档结构，并且不需要任何脚本，例如：

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

这适用于所有UL和不同结构（如上面的DIV）。有一些方法可以在脚本中完成，但前提是CSS方法不合适。

在ul的dom导航代码中只有一点点

2 个答案: