title: Add classes to two level navigation with javascript
body: <p>I have a simple navigation with two levels.  The li-elements of the first level shall get class="n11", that of the second class="n12".</p>
  
  <p>This will write class="n11" to every li-element.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var firstNavi = document.getElementsByClassName("nav1-1");
  for(var i = 0; i &lt; firstNavi.length; i++) {
      var firstLi = firstNavi[i].querySelectorAll("li");
      for(var i = 0; i &lt; firstLi.length; i++) {
          firstLi[i].classList.add("n11");
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="nav1-1"&gt;
      &lt;li &gt;&lt;a href=""&gt;1.1.&lt;/a&gt;&lt;/li&gt;
      &lt;li &gt;&lt;a href=""&gt;1.2&lt;/a&gt;
          &lt;ul class="nav1-2"&gt;
              &lt;li&gt;&lt;a href=""&gt;1.2.1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;1.2.2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;1.3&lt;/a&gt;
          &lt;ul class="nav1-2"&gt;
              &lt;li&gt;&lt;a href=""&gt;1.3.1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;1.3.2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;li&gt;&lt;a href=""&gt;1.4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How to achieve that is written class="n12" to the second li-elements and class="n11" only to the first level entries? Thanks for any help.   </p>