选择没有特定类的jQuery First Child

Question

I have a page with nested divs being used as Js/Jq tabs. When you click on a parent tab, it fires the click event of the first child underneath the parent.

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

This functionality works great as is. However, we're adding functionality to effectively "lock" tabs by adding a "locked" class dynamically via c#/linq and then on window.ready we unbind all the tabs with the "locked" class and color them grey to indicate that they are disabled.

I'm trying to modify the last line of the jQuery code above to click the first child that DOESN'T have the "locked" class.

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

Translating that into plainspeak, it's saying "In the Second Row, fire the click event of the first child tab in the 'pricing' group". I'd like it to say "In the Second Row, fire the click event of the first child tab in the 'pricing' group that DOES NOT have the class 'locked'".

I've tried using:

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

Which seems the correct way to do this, but it still looks at the first child and just doesn't fire the trigger('click'). Am I missing something?

Here is the 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>

The "locked" class is added through C#:

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");
    }
}

Answer 1

Try

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

Your selector looks fine though. Usually a good idea to minimize your selector complexity.

Also remember that every time you do a selector jQuery traverses the dom, so its best to save returned elements for a given selector as a variable(for performance) eg:

var $tab_containers = $('#secondRow .pricing div.tab');

And then use it multiple times like

$tab_containers.not('.locked').children().first().trigger('click');