UL LI Parent Child Tree Traverse

UL LI Parent Child Tree Traverse

by Abid Shaik

HTML

<ul class="TopLevel">
  <li>United States of America
    <ul class="Level2">
      <li>Ohio
        <ul class="Level3">
          <li>Cleveland</li>
          <li>Kent</li>
        </ul>
      </li>
      <li>North Carolina
        <ul class="Level3">
          <li>Raleigh</li>
          <li>Charlotte</li>
        </ul>
      </li>
      <li>New York
        <ul class="Level3">
          <li>Albany</li>
          <li>New York</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>India
    <ul class="Level2">
      <li>Andhra Pradesh
        <ul class="Level3">
          <li>Nellore</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<div id="output">

</div>

CSS

ul li {
  list-style: square;
}

JavaScript

$(document).ready(function() {
  $("li").on("click", function() {
    $("#output").html($(this).html());
  });
});