选择器上的jQuery增量数

编辑问题以按请求添加jsfiddle.net链接。很抱歉。以下是链接：

我得到了如下函数：

$(document).ready(function() {
    $('.innertabs2 > div').hide();
    $('.innertabs2 div:first').show();
    $('.innertabs2 ul.inner-tab-nav2 li:first').addClass('active');
    $('.innertabs2 ul.inner-tab-nav2 li a').click(function() {
        $('.innertabs2 ul.inner-tab-nav2 li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('.innertabs2 > div').hide();
        $(currentTab).fadeIn(400).show();
        //$(currentTab).show();
        return false;
    });
});​

请特别注意“.innertab”和“.innertab nav”选择器上的数字2。如何使此函数更具可扩展性，从而可以在页面上多次重用，而不是每次手动创建新函数

下面是我正在使用的HTML的简化版本：

<div class="tabs"><!--begin tab container-->

<ul class="tab-nav">
    <li><a href="#menu1">Menu 1</a></li>
    <li><a href="#menu2">Menu 2</a></li>
    <li><a href="#menu3">Menu 3</a></li>
</ul>

<div id="MenuContent"><!-- begin main tab's content-->

        <div class="innertabs2"><!--begin subtab set 1 (need to autoincrement number)-->

            <ul class="inner-tab-nav2">
                <li><a href="#submenu1">Submenu 1</a></li>
                <li><a href="#submenu2">Submenu 2</a></li>
                <li><a href="#submenu3">Submenu 3</a></li>
            </ul>

            <div id="submenu1"><!--begin tab 1-->                   

                {{CONTENT}}

            </div><!--end tab 1-->

            <div id="submenu2"><!--begin tab 2-->

                {{CONTENT}}

            </div><!--end tab 2-->

            <div id="submenu3"><!--begin tab 3-->

                {{CONTENT}}

            </div><!--end tab 3-->

        </div><!--end subtab set 1-->

</div><!--end main tab's content-->

---

你缺少了一堆+和'，最后还有额外的}

$(".tabs > div").each(function(i) {
    $('.innertabs' + i + ' > div ').hide();
    $('.innertabs '+i +' div:first').show();
    $('.innertabs' + i + 'ul.inner-tab-nav' + i + ' li: first ').addClass('active ');
    $('.innertabs '+i +'ul.inner - tab - nav '+i+' li a').click(function() {
    $('.innertabs' + i +' ul.inner-tab-nav' + i +' li ').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('.innertabs '+i +' > div').hide();
    $(currentTab).fadeIn(400).show();
    return false;
});

---

你缺少了一堆+和'，最后还有额外的}

$(".tabs > div").each(function(i) {
    $('.innertabs' + i + ' > div ').hide();
    $('.innertabs '+i +' div:first').show();
    $('.innertabs' + i + 'ul.inner-tab-nav' + i + ' li: first ').addClass('active ');
    $('.innertabs '+i +'ul.inner - tab - nav '+i+' li a').click(function() {
    $('.innertabs' + i +' ul.inner-tab-nav' + i +' li ').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('.innertabs '+i +' > div').hide();
    $(currentTab).fadeIn(400).show();
    return false;
});

---

与使用.each进行不必要的迭代不同，您可以使用属性选择器^=开始，如下所示：

$('[class^="innertabs"] > div').hide();
$('[class^="innertabs"] div:first').show();
$('[class^="innertabs"] ul[class^="inner-tab-nav"] li:first').addClass('active');
$('[class^="innertabs"] ul[class^="inner-tab-nav"] li a').click(function() {
    $('[class^="innertabs"] ul[class^="inner-tab-nav"] li').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('[class^="innertabs"] > div').hide();
    $(currentTab).fadeIn(400).show();
    return false;
});

---

与使用.each进行不必要的迭代不同，您可以使用属性选择器^=开始，如下所示：

$('[class^="innertabs"] > div').hide();
$('[class^="innertabs"] div:first').show();
$('[class^="innertabs"] ul[class^="inner-tab-nav"] li:first').addClass('active');
$('[class^="innertabs"] ul[class^="inner-tab-nav"] li a').click(function() {
    $('[class^="innertabs"] ul[class^="inner-tab-nav"] li').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('[class^="innertabs"] > div').hide();
    $(currentTab).fadeIn(400).show();
    return false;
});

---

您可以使用几个类来区分元素，同时在脚本中使用公共类：

<div class="tabs">

    <ul class="tab-nav">

    <div class="inner-tabs second">
        <ul class="inner-tab-nav second">
        </ul>

        <div class="inner-tabs third">
            <ul class="inner-tab-nav third">
            </ul>
        </div>

    </div>

在脚本中，您可以简单地使用class.internal选项卡对行为进行编码。 在CSS中，您可以组合.inner-tabs.second来区分样式

我认为CSS类的这种使用产生了更清晰的标记以及更多的语义

---

此外，使用过于复杂的jquery选择器会降低选择速度，并且可读性较差：。内部选项卡比[class^=innertabs]乍一看更有意义，对吗？

您可以使用几个类来区分元素，同时在脚本中使用公共类：

<div class="tabs">

    <ul class="tab-nav">

    <div class="inner-tabs second">
        <ul class="inner-tab-nav second">
        </ul>

        <div class="inner-tabs third">
            <ul class="inner-tab-nav third">
            </ul>
        </div>

    </div>

在脚本中，您可以简单地使用class.internal选项卡对行为进行编码。 在CSS中，您可以组合.inner-tabs.second来区分样式

我认为CSS类的这种使用产生了更清晰的标记以及更多的语义

---

此外，使用过于复杂的jquery选择器会降低选择速度，并且可读性较差：。内部选项卡比[class^=innertabs]乍一看更有意义，对吗？

例如，您的代码最好查看一下，这样每个人都可以运行它，更好地看到您的问题。您是对的，没有意识到JSFIDLE.net。下面是我实际代码的链接，希望您能更好地了解我试图实现的目标：例如，您的代码最好在这里查看，这样每个人都可以运行它，更好地了解您的问题。您是对的，没有意识到jsfiddle.net。这里是我实际代码的链接，希望您能更好地看到我试图实现的目标：+1井点@Derek这是使用IDE的一个很好的理由。就个人而言，NetBeans是我的最爱。使用IDE将帮助您避免此类问题。是的，我认为我的语法不正确。仍然无法让这个代码工作，即使我修复了抛出的额外空格。+1井点@Derek这是使用IDE的一个很好的理由。就个人而言，NetBeans是我的最爱。使用IDE将帮助您避免此类问题。是的，我认为我的语法不正确。即使在我修复了抛出的额外空间后，仍然无法使代码正常工作。这是一个很好的方法。我真的需要开始更多地查看不同的属性选择器。但我需要脚本在“innertabs”选择器的末尾查找数字或其他标识符，而不仅仅是文本“innertabs”。也许我误解了这是怎么回事？很好的方法。我真的需要开始更多地查看不同的属性选择器。但我需要脚本在“innertabs”选择器的末尾查找数字或其他标识符，而不仅仅是文本“innertabs”。也许我误解了这是怎么回事？说得好。但是，我仍然不确定如何创建一个将在“.innertab”和“.innertab nav”选择器上迭代的函数。如何在脚本中指定“第二个”和“第三个”选择器？为什么？如果行为是一样的，你就不在乎是第二个还是第三个……好的观点。但是，我仍然不确定如何创建一个将在“.innertab”和“.innertab nav”选择器上迭代的函数。如何在脚本中指定“第二个”和“第三个”选择器？为什么？如果行为是一样的，你并不在乎是第二个还是第三个。。。