title: jquery: Trying to understand the next() function
body: <p>I was using the jquery next() method on the following html:</p>
  
  <pre><code>&lt;div id="NavBar"&gt;
  
      &lt;div class="dropDownList"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Products&lt;/span&gt;&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;test&lt;/span&gt;&lt;/a&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;test&lt;/span&gt;&lt;/a&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Company&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="dropDownList"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Products&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Company&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I added the following click handler to anchors in the list and wrote the current and next() element to the console like so:</p>
  
  <pre><code>$('.dropDownList &gt; ul &gt; li &gt; a').click(function() {
  
      console.dir($(this));
  
      var checkElement = $(this).next();
  
      console.dir(checkElement);
      }
  </code></pre>
  
  <p>When I click the "Products" list item of the first ul I see this in the console:
  <img src="https://i.stack.imgur.com/NwVmn.png" alt="enter image description here"></p>
  
  <p>So I can see the first element is the anchor and the next is the ul- this makes sense to me. Now my confusion comes in when I click the "Products" list item in the second ul. I get back two objects like before, but this time they are both anchors. I thought that the first anchor element would be "Products" and the second would be "Company" because that is the next element in the list- or maybe even the <code>&lt;li&gt;</code> element containing the next anchor. Instead when I drill down into the objects in the console they appear to be the same element. The text and textContent field is the same for both:
  <img src="https://i.stack.imgur.com/HhpVH.png" alt="enter image description here"></p>
  
  <p>Why is this?</p>