title: jquery click event on whole selection using "this" keyword
body: <p>Let's say that you have an image gallery like so:</p>
  
  <pre><code>&lt;div id="gallery"&gt;
  &lt;a href="images/one_sb.JPG"&gt;&lt;img src="images/one_s.jpg" /&gt;&lt;/a&gt;
  &lt;a href="images/two_sb.JPG"&gt;&lt;img src="images/two_s.jpg" /&gt;&lt;/a&gt;
  &lt;a href="images/three_sb.JPG"&gt;&lt;img src="images/three_s.jpg" /&gt;&lt;/a&gt;
  &lt;a href="images/four_sb.JPG"&gt;&lt;img src="images/four_s.jpg" /&gt;&lt;/a&gt;
  &lt;a href="images/five_sb.JPG"&gt;&lt;img src="images/five_s.jpg" /&gt;&lt;/a&gt;
  &lt;a href="images/six_sb.JPG"&gt;&lt;img src="images/six_s.jpg" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And you want to bind an event handler to each individual image. This event handler will be part of an image gallery mechanism that uses thumbnails to switch from small images to big images.</p>
  
  <p>Some of the code:</p>
  
  <pre><code>$('#gallery a').click(function(evt) {
      //don't follow link
       evt.preventDefault();
       //get path to new image
     var imgPath = $(this).attr('href');
       //get reference to old image
       etc...
  
  }); // end click
  </code></pre>
  
  <p>From my understanding the <code>$()</code> does: "<a href="http://learn.jquery.com/using-jquery-core/jquery-object/" rel="nofollow">jQuery returns the elements in a collection</a>" in essence it returns all the  tags that are children of the "gallery" id</p>
  
  <p>If $() returns a collection than why does it seem like by using the "click" event handler that the collection is being iterated over and we can reference the current element being clicked on by "this"? Wouldn't we need to use the "each()" method to iterate over the jQuery object that was returned with <code>$('#gallery a')</code></p>
  
  <p>Any references to jQuery documentation in answer to this would be appreciated.</p>