Выбор jQuery First Child без определенного класса

У меня есть страница с вложенными div, которые используются как вкладки Js/Jq. Когда вы нажимаете на родительскую вкладку, она запускает событие щелчка первого дочернего элемента под родительским элементом.

$('#topRow .pricing').click(function () {
    $('#secondRow .pricing').css('display', 'block');
    $('#secondRow .pricing div.tab:first-child').trigger('click');
});

Эта функциональность отлично работает, как есть. Тем не менее, мы добавляем функциональные возможности для эффективной блокировки вкладок, добавляя "заблокированный" класс динамически с помощью С#/linq, а затем на window.ready мы отвязываем все вкладки с классом "заблокирован" и окрашиваем их в серый цвет, чтобы указать, что они отключены.

Я пытаюсь изменить последнюю строку кода jQuery выше, чтобы щелкнуть первый ребенок, который НЕ имеет "заблокированный" класс.

    $('#secondRow .pricing div.tab:first-child').trigger('click');

Переведя это в plainspeak, он говорит: "Во второй строке запустите событие щелчка первой дочерней вкладки в группе" цена ". Я бы хотел, чтобы он сказал: "Во второй строке, запустите событие click на первой дочерней вкладке в группе" цена ", которая НЕ имеет класс" заблокирован ".

Я пробовал использовать:

    $('#secondRow .pricing div.tab:not(.locked):first-child').trigger('click');

Кажется правильным способом сделать это, но он все еще смотрит на первого ребенка и просто не запускает триггер ("щелчок"). Я что-то упускаю?

Вот html:

<div id="topRow">               
    <div class="pricing tab" runat="server" id="pricingTop">
        <div class="tabLeft">
            <div class="tabMain">
                Pricing
            </div>
        </div>
    </div>
</div>
<div id="secondRow">    
    <div id="pricingTabGroup" runat="server" class="pricing tabGroup" style="display:none">
        <div id="pricingProductA" runat="server" class="tab locked pricingProductA">
            <div class="tabLeft">
                <div class="tabMain">
                    ProductA
                </div>
            </div>
        </div>
        <div id="pricingProductB" runat="server" class="tab pricingProductB">
            <div class="tabLeft">
                <div class="tabMain">
                    ProductB
                </div>
            </div>
        </div>
    </div>
</div>

Класс "заблокирован" добавляется через С#:

protected void Page_Load(object sender, EventArgs e)
{
    bool ProductA = //some linq query

    if (!ProductA)
    {
        LockTab(pricingProductA);
    }

    protected void LockTab(HtmlGenericControl tab)
    {
        //Adds the "locked" class
        tab.Attributes.Add("class", "locked");
    }
}