Две строки похожего кода, одна работает, другая нет. Почему бы и нет?

Question

У меня есть две строки:

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

Первая строка не работает, но вторая работает. Почему?

Вот соответствующий HTML, если вы должны знать:

<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 - это div с классом ".box"

Answer 1

Потому что .children () выбирает только непосредственных детей. Где в качестве «#X Y» выбираются все потомки Y элемента с идентификатором X.

Answer 2

заменить "дети" в $target_box.children на $target_box.find

children выбирает непосредственных потомков, а find ищет / находит внутри узла !!

Answer 3

В качестве альтернативы вы можете использовать $target_box в качестве контекста :

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

(Да, это нарушает комментарий ОП * "Так есть ли какая-то возможность переписать строку # 1, чтобы она начиналась с $ target_box. Для того, чтобы код был более читабельным?" )