c# - 选择没有特定类的 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 上取消所有选项卡与“锁定”类的绑定(bind)，并将它们涂成灰色以指示它们已禁用。

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

    $('#secondRow .pricing div.tab:first-child').trigger('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>

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