CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Chaitanya Chauhan
Chaitanya Chauhan

Reputation: 785

level indicator using jQuery

Can we add class at each level like below using Jquery/JS? So that we can identify that on which level of list we are.. 

<ul>
<li class="level1">level 1
     <ul>
     <li class="level2">level 2</li>
     <li class="level2">level 2</li>
     <li class="level2">level 2
         <ul>
         <li class="level3">level 3</li>
         <li class="level3">level 3</li>
         <li class="level3">level 3
             <ul>
             <li class="level4">level 4</li>
             <li class="level4">level 4</li>
             <li class="level4">level 4</li>
             </ul>
         </li>
         </ul>
     </li>
     <ul>
</li>
<li class="level1">level 1</li>
<li class="level1">level 1</li>
</ul>

Upvotes: 1

Views: 758

Answers (4)

KrakenDev
KrakenDev

Reputation: 196

If you want some extra speed you can try a pure javascript solution. Here is a JsFiddle for some food for thought.

http://jsfiddle.net/fqp74r8j/

var listArr = document.querySelectorAll('ul');

[].forEach.call(listArr, function(el, i) {
    var listLen = el.children.length;

    for (var j = 0; j < el.children.length; j++) {
        el.children[j].classList.add('level-' + (i + 1));
    }
});

Upvotes: 1

epascarello
epascarello

Reputation: 207527

This is a way without needing to keep looking up the parents.

(function find(par, index) {
    index += 1; 
    var lis = par.find("> li").addClass("level" + index);
    if (lis.length) {
        find(lis.find("> ul"),index);  
    }
}($("ul#start"),0))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<ul id="start">
<li>level 1
     <ul>
     <li>level 2</li>
     <li>level 2</li>
     <li>level 2
         <ul>
         <li>level 3</li>
         <li>level 3</li>
         <li>level 3
             <ul>
             <li>level 4</li>
             <li>level 4</li>
             <li>level 4</li>
             </ul>
         </li>
         </ul>
     </li>
     </ul>

</li>
<li>level 1</li>
<li>level 1</li>
</ul>

Upvotes: 2

Dave
Dave

Reputation: 10924

You can do this with a simple recursive function.

function addLevels(parent, level) {
  parent = parent || $("body").children("ul");
  level = level || 1;
  var children = parent.children("li");
  children.addClass("level" + level);
  parent = children.children("ul");
  if (parent.length)
    addLevels(parent, ++level);
}

$(function() {
  addLevels();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>level 1
    <ul>
      <li>level 2</li>
      <li>level 2</li>
      <li>level 2
        <ul>
          <li>level 3</li>
          <li>level 3</li>
          <li>level 3
            <ul>
              <li>level 4</li>
              <li>level 4</li>
              <li>level 4</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>level 1</li>
  <li>level 1</li>
</ul>

Upvotes: 1

guest271314
guest271314

Reputation: 1

Try utilizing .each() , .parents() , .length 

$("li").each(function(i,el) {
  $(this).addClass("level" + $(this).parents("ul").length)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<ul>
<li>level 1
     <ul>
     <li>level 2</li>
     <li>level 2</li>
     <li>level 2
         <ul>
         <li>level 3</li>
         <li>level 3</li>
         <li>level 3
             <ul>
             <li>level 4</li>
             <li>level 4</li>
             <li>level 4</li>
             </ul>
         </li>
         </ul>
     </li>
     </ul>

</li>
<li>level 1</li>
<li>level 1</li>
</ul>

Upvotes: 4

Related Questions