title: trying to understand different $(this) in jquery
body: <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Demo&lt;/title&gt;
      &lt;style type="text/css"&gt;
          #gallery
          {
              width: 960px;
              margin: 0 auto;
          }
          .galleryitem
          {
              width: 300px;
              height: 300px;
              float: left;
              font-family: Lucida Sans Unicode, Arial;
              font-style: italic;
              font-size: 13px;
              border: 5px solid black;
              margin: 3px;
          }
          .galleryitem img
          {
              width: 300px;
          }
          .galleryitem p
          {
              text-indent: 15px;
          }
          #galleryhoverp
          {
              margin-top: -55px;
              background-color: black;
              opacity: 0.5;
              -moz-opacity: 0.5;
              filter: alpha(opacity=50);
              height: 40px;
              color: white;
              padding-top: 10px;
          }
          #singleimagedisplay
          {
              width: 800px;
          }
          #singleimagedisplay img
          {
              width: 800px;
          }
          #singleimagedisplay a
          {
              float: right;
              color: white;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="gallery"&gt;
          &lt;div class="galleryitem"&gt;
              &lt;img src="computer1.png" alt="A beautiful Sunset over a field" /&gt;&lt;p&gt;
                  A beautiful Sunset over a field&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="galleryitem"&gt;
              &lt;img src="computer2.png" alt="Some penguins on the beach" /&gt;&lt;p&gt;
                  Some penguins on the beach&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="galleryitem"&gt;
              &lt;img src="computer3.png" alt="The sun trying to break through the clouds" /&gt;&lt;p&gt;
                  The sun trying to break through the clouds&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="galleryitem"&gt;
              &lt;img src="computer.png" alt="Palm tress on a sunny day" /&gt;&lt;p&gt;
                  Palm tress on a sunny day&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="galleryitem"&gt;
              &lt;img src="computer4.png" alt="The sun bursting through the tall grass" /&gt;&lt;p&gt;
                  The sun bursting through the tall grass&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $('p').hide();
      var galleryItems = $('.galleryitem');
      galleryItems.css('height', '200px');
      var images = $('.galleryitem').find('img');
      galleryItems.hover(
      function () {
          $(this).children('p').show().attr('id', 'galleryhoverp');
      },
      function () {
          $(this).children('p').hide().attr('id', '');
      }
  )
      images.click(function () {
          $(this).parent().attr('id', 'singleimagedisplay').css('height', $(this).height()).siblings().hide();
      })
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Above code is from here: <a href="http://www.1stwebdesigner.com/tutorials/jquery-beginners-4/" rel="nofollow">http://www.1stwebdesigner.com/tutorials/jquery-beginners-4/</a></p>
  
  <p>Question:</p>
  
  <p>For this line:  <code>$(this).parent().attr('id', 'singleimagedisplay').css('height', $(this).height()).siblings().hide();</code></p>
  
  <p>1.I know the first <code>$(this)</code> means the img that clicked, but what does sencond <code>$(this)</code> mean? </p>
  
  <p>2.when I clicked one img on the frontend, I can see see the img get enlarged, and it shows <code>style="height: 533px;</code> in firebug, but how come it is 533px? in css script, there is no such definition as <code>height: 533px</code>.</p>