選擇器上的jQuery增量編號

Question

編輯按照要求添加jsfiddle.net鏈接的問題。對於那個很抱歉。這裏的鏈接：http://jsfiddle.net/AuQL3/

我有了這個功能，看起來像這樣：

$(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; 
    }); 
});​ 

通知專門對「.innertabs'和」 .inner片定位導航」選擇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--> 

我一直在使用。每次嘗試（）來得到想要的效果，但我覺得我的語法是路要走：

$(document).ready(function() { 


$(".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(); 
      //$(currentTab).show(); 
      return false; 
     } 
     }); 
    });​ 

Answer 1

你缺少了一堆+和'，你也有多餘的}末

$(".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; 
}); 

Answer 2

而不是做不必要的重複與.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; 
}); 

Answer 3

你可以做的是使用幾類，而有共同者區分的元素你可以在腳本中使用類：

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

在腳本中，你可以簡單地使用類.inner-tabs到代碼的行爲。
在你的CSS中，你可以結合.inner-tabs.second來區分樣式。

我認爲這種CSS類的使用產生更清晰的標記以及更多的語義。

此外，使用過於複雜的jQuery選擇器會減慢選擇速度，並且可讀性較差：.inner-tabs更有意義，然後[class^="innertabs"]對吧？