Almost there with this DOM code

JavaScript
1

<body>
<ul class=“outer”>

    &lt;li&gt;This is info for Chino in Reno&lt;/li&gt;
    &lt;li&gt;  
        &lt;ul class="inner"&gt;
            &lt;li&gt;This is info for Chino in Reno&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;ul class="inner"&gt;
            &lt;li&gt;This is info for Chino in Reno&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;This is info for Chino in Reno&lt;/li&gt;
    &lt;li&gt;
        &lt;ul class="inner"&gt;
            &lt;li&gt;This is info for Chino in Reno&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;This is info for Chino in Reno&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;

<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 &lt; jj; j++)
    {
        if(outer_list[j].childNodes)// want to get nested li &lt; ul 
        {
            outer_list[j].className = "style2"; // style it green
        }
        else
        {
            outer_list[j].className = "style"; // style it red
        }
    };// end for loop
};

I’m trying to experiment and extend this code for ul’s within li’s within a ul!

I feel like that if statement is where things aren’t sound, perhaps I have the wrong the childNode method???

perhaps this would be better, but I don’t quite know how to write it out:

if(outer_list[j].hasChildNodes == true)

Any suggestions?

2

hasChildNodes() is a method, not a property.

3

Child nodes can include newlines so checking for them is meaningless.

Does this do what you intend?

<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++)
  {  
   outer_list[j].className = outer_list[j].getElementsByTagName('ul').length ? "style2" : "style";
  }
}
</script>
4

That code does work!
Thanks for the insight Logic Ali.