title: jQuery closest(), parents() and parent() affects multiple elements at same DOM level
body: <p>I am trying to traverse up the DOM to the closest DIV.  The markup below is below.</p>
  
  <pre><code>&lt;div&gt;
       &lt;span&gt;
             &lt;a class="anchor"&gt;Text&lt;/a&gt;
       &lt;/span&gt;
  &lt;/div&gt;
  &lt;div&gt;
       &lt;span&gt;
             &lt;a class="anchor"&gt;Text&lt;/a&gt;
       &lt;/span&gt;
  &lt;/div&gt;
  &lt;div&gt;
       &lt;span&gt;
             &lt;a class="anchor"&gt;Text&lt;/a&gt;
       &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I use any of the following:</p>
  
  <pre><code>$('.anchor').closest('div').css('background-color', 'red');
  $('.anchor').parents('div').css('background-color', 'red');
  $('.anchor').parent().parent().css('background-color', 'red');
  </code></pre>
  
  <p>It affects all the DIVs like so:</p>
  
  <pre><code>&lt;div style="background-color: red"&gt;
       &lt;span&gt;
             &lt;a class="anchor"&gt;Text&lt;/a&gt;
       &lt;/span&gt;
  &lt;/div&gt;
  &lt;div style="background-color: red"&gt;
       &lt;span&gt;
             &lt;a class="anchor"&gt;Text&lt;/a&gt;
       &lt;/span&gt;
  &lt;/div&gt;
  &lt;div style="background-color: red"&gt;
       &lt;span&gt;
             &lt;a class="anchor"&gt;Text&lt;/a&gt;
       &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I were to click the middle anchor I want this:</p>
  
  <pre><code>&lt;div&gt;
       &lt;span&gt;
             &lt;a class="anchor"&gt;Text&lt;/a&gt;
       &lt;/span&gt;
  &lt;/div&gt;
  &lt;div style="background-color: red"&gt;
       &lt;span&gt;
             &lt;a class="anchor"&gt;Text&lt;/a&gt;
       &lt;/span&gt;
  &lt;/div&gt;
  &lt;div&gt;
       &lt;span&gt;
             &lt;a class="anchor"&gt;Text&lt;/a&gt;
       &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I think I see why <code>closest()</code> would match all three DIVs as the closest DIV to the clicked anchor as it is generically matching DIV.</p>
  
  <p>But when using <code>parents()</code> or <code>parent()</code> it's not as clear as the other DIVs are not a parent of a click anchor.  But I can also see where it might just be generically matching DIVs again at that level in the DOM.  Although it seems like <code>parents()</code> and <code>parent()</code> should maintain more of a contextual context when matching.</p>