Question

I have these two lines:

$target_box.children('a.ajax_trigger_title').addClass('opened_post_title');
jQuery('#'+$target_box.attr('id')+' a.ajax_trigger_title').addClass('opened_post_title');

The first line doesn’t work, but the second one does. Why?

Here’s the relevant HTML if you must know:

<div class="box" id="30" style="position: absolute; left: 350px; top: 0px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; ">
    <h2>
        <a class="ajax_trigger_title" id="open_30" href="http://keepskatinbro.com/2011/01/20/some-highlights-from-ksbs-throw-down-show-down/" rel="30">
            <span>Highlights from KSB’s “Throw Down Show Down”.</span>
        </a>
    </h2>
</div>

$target_box is the div with the class of “.box”

Answer 1

Because .children() only selects the immediate children. Where as “#X Y” selects all descendants Y of element with ID X.