SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Almost there with this DOM code...

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




    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. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,812
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    hasChildNodes() is a method, not a property.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Child nodes can include newlines so checking for them is meaningless.

    Does this do what you intend?
    Code:
    <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>
    Tab-indentation is a crime against humanity.

  4. #4
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That code does work!
    Thanks for the insight Logic Ali.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •