Two lines of similar code, one works, the other doesn't. Why not?

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 "#XY" selects all descendants Y of element with ID X.

Answer 2

replace "children" in $target_box.children with $target_box.find

children selects immediate children while find looks/finds inside the node!!

Answer 3

Alternatively, you could use $target_box as the context :

$('a.ajax_trigger_title', $target_box).addClass(...);

(Yes this violates OP's comment *"So is there someway to rewrite line #1 so that it starts with $target_box. for intents of having code that is more readble?"* Didn't see it until after I posted.)