Question

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

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

此功能原样很好用。但是，我们正在添加功能以有效地锁定＆＃34;标签通过添加＆＃34;锁定＆＃34;通过c＃/ linq动态分类，然后在window.ready上取消绑定所有选项卡＆＃34; locked＆＃34;类和颜色为灰色表示它们已被禁用。

我试图修改上面jQuery代码的最后一行，点击第一个孩子，他们已经锁定了＆＃34;锁定了＃34;类。

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

将其翻译成plainspeak，它会说＆＃34;在第二行中，点击＆＃39;定价＆＃39;中第一个子标签的点击事件。组＆＃34 ;.我想说＆＃34;在第二行中，点击＆＃39;定价＆＃39;中第一个子标签的点击事件。没有上课的小组＆＃39;＆＃39;＆＃34;。

我尝试过使用：

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

这似乎是正确的方法，但它仍然会关注第一个孩子并且不会触发触发器（＆＃39;点击＆＃39;）。我错过了什么吗？

这是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>

＆＃34;锁定＆＃34; class通过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');

选择没有特定类的jQuery First Child

1 个答案: