title: jQuery addClass to 1st-3rd Matched Elements
body: <p><strong>BACKGROUND</strong></p>
  
  <p>I've got a layout consisting of four absolutely-positioned div "quadrants", like so:</p>
  
  <pre><code>div.quadrant#one    |     div.quadrant#two
  height: 25%;        |     height: 25%;
  width: 25%;         |     width: 25%;
                      |
  __________________________________________
  
  div.quadrant#three  |    div.quadrant#four
  height: 25%;        |    height: 25%;
  width: 25%;         |    width: 25%;
                      |
  </code></pre>
  
  <p><em>HTML</em></p>
  
  <pre><code>&lt;div class="quadrant" id="one"&gt;&lt;/div&gt;
  &lt;div class="quadrant" id="two"&gt;&lt;/div&gt;
  &lt;div class="quadrant" id="three"&gt;&lt;/div&gt;
  &lt;div class="quadrant" id="four"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I'm using jQuery to add classes of <code>.open</code> or <code>.closed</code> to the quadrants when one is clicked so the <code>quadrant.open</code> grows to 95% width and 100% height and the <code>quadrant.closed</code> shrink to 5% width and 33.33% height. Here's that code:</p>
  
  <pre><code>$( 'div.quadrant' ).click(function() {  
    $(this).addClass('open'); 
    $(this).parent().children('div.quadrant').not('.open').addClass('closed');  
  });
  </code></pre>
  
  <p>I've got that piece working no problem. <em>Here's where I'm stumped</em>:</p>
  
  <p><strong>THE PROBLEM</strong></p>
  
  <p>I'm also trying to use <code>.addClass</code> to add another class to the three <code>div.closed</code> elements depending on whether they're the first <code>div.closed</code>, the second, or the third. If a div is the first with class "closed", I'd like to also add <code>.top</code>; if the second, I'd like to add <code>.middle</code>; if the third, I'd like to add <code>.bottom</code>.</p>
  
  <p>I've tried to get this working by using <code>:eq(1)</code>, <code>:eq(2)</code>, and <code>:eq(3)</code>. <strong>However, it only works if <code>div#one</code> or <code>div#two</code> are clicked, then the <code>div.closed</code> quadrants after that don't seem to be affected.</strong> Here's that code:</p>
  
  <pre><code>$(this).parent().children('div.quadrant').not('.open').addClass('closed');
  $(this).parent().children('div.quadrant:eq(1)').not('.open').addClass('top');
  $(this).parent().children('div.quadrant:eq(2)').not('.open').addClass('middle');
  $(this).parent().children('div.quadrant:eq(3)').not('.open').addClass('bottom');
  </code></pre>
  
  <p>Here's a JS Bin: <a href="http://jsbin.com/UJopeTo/1/edit?html,css,js,output" rel="nofollow">http://jsbin.com/UJopeTo/1/edit?html,css,js,output</a></p>
  
  <p>Is there something wrong with the way I've chained these functions? Any help is appreciated!</p>