CODEWITHSUNDEEP
javascript
kmb
kmb

Reputation: 871

Looking for elements with specific depth in JavaScript

I need to write a function in pure JavaScript witn no framework to get all specific tags, but only from first level under parent.

For example: I need to call some function on first <ul> and get all <li> from first level of it (<li> with text 1.2 and <li> with text 2.1)

<div id="sideNavigation">
    <ul>
       <li class=" act open  "> 
          1.2
          <ul>
             <li class="  ">
                1.2
                <ul>
                   <li class="  ">
                      1.3
                      <ul>
                         <li class="  ">1.4</li>
                      </ul>
                   </li>
                </ul>
             </li>
          </ul>
       </li>
       <li class="  ">
          2.1
          <ul>
             <li class="  ">2.2.1</li>
             <li class="  ">2.2.2</li>
             <li class="  ">2.2.3</li>
          </ul>
       </li>
    </ul>
</div>

I've been trying to do it like this: 

var allLi = document.getElementById("sideNavigation").getElementsByTagName("li");

but it returns all <li> in this div not only first level <li>. Do you have any quick method to solve my problem or do I have to implement a new function to detect depth of nodes

Upvotes: 1

Views: 728

Answers (2)

Tiernan Crotty
Tiernan Crotty

Reputation: 307

Try:

var allLi = document.getElementById("sideNavigation").getElementsByTagName("li")[0];

That should return the first li element out of all li's on the page. Change the zero at the end to a different number to get a different element. You could even set a variable for the value:

var liNum = 0;
var allLi = document.getElementById("sideNavigation").getElementsByTagName("li")[liNum];

And in a function: 

function getLi(depth) {
    var specificLi = document.getElementById("sideNavigation").getElementsByTagName("li")[depth];
    return specificLi;
}
    
var firstLi = getLi(0);
console.log(firstLi);
<div id="sideNavigation">
    <ul>
        <li>First list tag</li>
        <li>Second list tag</li>
        <li>Third list tag</li>
    </ul>
</div>

And to make the function even shorter, you could just do:

function getLi(depth) {
    return document.getElementById("sideNavigation").getElementsByTagName("li")[depth];
}

That should work. :)

Upvotes: 0

Vishkey
Vishkey

Reputation: 197

You can use the attribute .children to get those "li"

var firstDepthLi = document.getElementById("sideNavigation").children[0].children;

If you want a generic function you can create something like:

var getElementsByDepth = function(el, tagname, depth) {
       var children = el.children;
       var res = new Array();
       for(var i=0; i<children.length; i++) {
          if (children[i].tagName == tagname) {
             res.push(children[i]);
             if (depth > 0)
                 res.concat(getElementsByDepth(children[i], tagname, depth-1));
          }
       }
       return res;
}

Upvotes: 2

Related Questions