title: Get immediate child using nextUntil
body: <p>I have some html :)</p>
  
  <pre><code>&lt;div class="categories"&gt;
      &lt;div class="list-group"&gt;
          &lt;a class="root list-group-item" id="427" style="display: block;"&gt;&lt;span class="glyphicon indent0 glyphicon-chevron-down"&gt;&lt;/span&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;
          &lt;a class="list-group-item first active" id="428" style="display: block;"&gt;&lt;span class="glyphicon indent1 glyphicon-chevron-right"&gt;&lt;/span&gt;&lt;span&gt;Images&lt;/span&gt;&lt;/a&gt;
          &lt;a class="list-group-item child" id="431" style="display: none;"&gt;&lt;span class="glyphicon glyphicon-chevron-right indent2"&gt;&lt;/span&gt;&lt;span&gt;Sub category&lt;/span&gt;&lt;/a&gt;
          &lt;a class="list-group-item child" id="433" style="display: none;"&gt;&lt;span class="glyphicon indent3"&gt;&lt;/span&gt;&lt;span&gt;Super sub&lt;/span&gt;&lt;/a&gt;
          &lt;a class="list-group-item first" id="429" style="display: block;"&gt;&lt;span class="glyphicon glyphicon-chevron-right indent1"&gt;&lt;/span&gt;&lt;span&gt;Videos&lt;/span&gt;&lt;/a&gt;
          &lt;a class="list-group-item child" id="432" style="display: none;"&gt;&lt;span class="glyphicon indent2"&gt;&lt;/span&gt;&lt;span&gt;Another sub&lt;/span&gt;&lt;/a&gt;
          &lt;a class="list-group-item first" id="430" style="display: block;"&gt;&lt;span class="glyphicon indent1"&gt;&lt;/span&gt;&lt;span&gt;Documents&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I have this function:</p>
  
  <pre><code>$(".glyphicon", treeRoot).on('click', function (e) {
      e.stopPropagation();
  
      var $glyph = $(this);
      var $item = $glyph.parent();
      var indent = $item.find(".glyphicon").prop('className').match(/\b(indent\d+)\b/)[1];
  
      if (indent != undefined) {
          var $children = $item.nextUntil("a:has(." + indent + ")");
  
          if ($glyph.hasClass("glyphicon-chevron-right")) {
              $glyph
                  .addClass('glyphicon-chevron-down')
                  .removeClass("glyphicon-chevron-right");
  
              if ($children != null) $children.show();
          } else {
              $glyph
                  .addClass('glyphicon-chevron-right')
                  .removeClass("glyphicon-chevron-down");
  
              if ($children != null) $children.hide();
          }
      }
  });
  </code></pre>
  
  <p>So basically, when the icon is clicked, it shows or hides the children.
  The problem is, it shows all children (indent2 and indent3) but I just want it to show the immediate children (indent2 in this example).</p>
  
  <p>Could someone give me some insight on how to do this?</p>
  
  <p>Cheers,</p>
  
  <p>/r3plica</p>