选择没有特定类的 jQuery First Child

Question

我有一个嵌套 div 用作 Js/Jq 选项卡的页面。当您点击父标签时，它会触发父标签下方第一个子标签的点击事件。

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

此功能按原样运行良好。但是，我们通过 c#/linq 动态添加“锁定”类，然后在 window.ready 上使用“锁定”类解除所有选项卡的绑定，并将它们涂成灰色以表示它们被禁用。

我正在尝试修改上面 jQuery 代码的最后一行，以单击第一个没有“锁定”类的子项。

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

将其翻译成通俗的说法，就是“在第二行，触发‘定价’组中第一个子标签的点击事件”。我想说“在第二行，触发‘定价’组中没有‘锁定’类的第一个子选项卡的点击事件”。

我尝试过使用：

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

这似乎是正确的方法，但它仍然会查看第一个孩子并且不会触发触发器（'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>

“锁定”类是通过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

试试

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

不过，您的选择器看起来不错。通常将选择器的复杂性降到最低是个好主意。

还请记住，每次执行选择器时，jQuery 都会遍历 dom，因此最好将给定选择器的返回元素保存为变量（出于性能考虑），例如：

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

然后像这样多次使用

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