0

我有一个嵌套 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");
    }
}
4

1 回答 1

3

尝试

$('#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');
于 2014-04-16T19:27:43.750 回答