title: jquery get children of children of children
body: <p>Okay, this may be a bit basic. The HTML is :</p>
  
  <pre><code>&lt;div class="parents-of-all"&gt;
  &lt;p&gt;
      &lt;a&gt;
          &lt;span class="thechild"&gt;Something&lt;/span&gt;
      &lt;/a&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p></p>
  
  <p>The jquery is </p>
  
  <pre><code>$('.parents-of-all').click(function(){
      alert($(this).find('span').attr('class'));
  });
  </code></pre>
  
  <p>But somehow it doesn't work. Test it here :</p>
  
  <p><a href="http://jsfiddle.net/3zn7e/1/" rel="noreferrer">http://jsfiddle.net/3zn7e/1/</a></p>
  
  <p>My question is how can I traverse to the span? My usual way is </p>
  
  <pre><code>$(this).children().children().children().attr('class');
  </code></pre>
  
  <p>I'm sure there are shorter ways than this and using find() is one of them, but I can't seem to make it work.</p>
  
  <p>Many thanks!</p>
  
  <p>EDIT : DUH! Apparently I forgot the . for the parents-of-all DOM selector. Sometimes the simplest error is right there in your face.</p>
  
  <p>But again, is there any difference between using find() and multiple children() ?  I find using multiple children() ensures more accurate traversing since we can add elements selector if we want, but any other major difference?</p>