title: .next() jquery function skips next sibling
body: <p>I am trying to remove a class from an element and add that class to the next element. The problem is that the next element gets skipped. Here is my Javascript:</p>
  
  <pre><code>var $active = this.$view.find('.active');
  if ($active.index() !== this.$view.children().length - 1) {
      $active.next('.list-group-item').addClass('active');
      $active.removeClass('active');
  }
  </code></pre>
  
  <p>Here is the HTML:</p>
  
  <pre><code> &lt;div&gt;
       &lt;a class="list-group-item active"&gt;1&lt;/a&gt;
       &lt;a class="list-group-item active"&gt;2&lt;/a&gt;
       &lt;a class="list-group-item active"&gt;3&lt;/a&gt;
       &lt;a class="list-group-item active"&gt;4&lt;/a&gt;
   &lt;/div&gt;
  </code></pre>