jquery get children of children of children
<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="nofollow">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>
