jquery - 複数のサーバー生成要素の jQuery タブ ナビゲーション

Question

これは、ページ上のタブのいくつかの異なるインスタンスで機能する優れたスクリプトです。

     jQuery('.tab_container').each(function(){

    var select = jQuery(this);
select.find('.detail').hide(); 
select.find('.detail:first').show(); 
select.find('div.tab_nav a:first').addClass('current_tab'); 

    select.find('div.tab_nav a').click(function(){ 
    var currentTab = select.find(jQuery(this).attr('href')); 
    select.find('div.tab_nav a').removeClass('current_tab');
    jQuery(this).addClass('current_tab'); 
    select.find('div.tab_nav a').addClass('other_tab');
    jQuery(this).removeClass('other_tab'); 
    select.find('.detail').hide(); 
    jQuery(currentTab).show(); 
    return false;
    });//link action  

});//each

今htmlのために：

   div class="tab_nav">

  <a href=".tab1" class="current_tab">Properties</a>

<a href=".tab2" class="other_tab" >Detail</a>
</div>


<div class="detail tab1">

 <div class="datarow">
   content 1
  </div>

 <div class="detail tab2">

   <div class="datarow">
 content 2
  </div>

警告: これは、ロードする要素が 50 個未満の場合にうまく機能します。そうしないと、すべてのループがエラーと悲しみを引き起こします。

したがって、私たちが試した解決策は次のように実行されます。

          <a href=".tab1" class="current_tab" onclick="showInfo('click', this, '${element.id}','${element.id.id}', 'list');jQuery(this).siblings().removeClass('current_tab'); jQuery(this).addClass('current_tab');jQuery(this).siblings().addClass('other_tab');jQuery(this).removeClass('other_tab');jQuery(this).parent().siblings('.tab1').show();jQuery(this).parent().siblings('.tab2').hide(); return false;">Properties</a>
          <%-- --%>
          <a href=".tab2" class="other_tab"
                 onclick="showInfo('click', this, '${element.id}','${element.id.id}', 'list');jQuery(this).siblings().removeClass('current_tab'); jQuery(this).addClass('current_tab');jQuery(this).siblings().addClass('other_tab');jQuery(this).removeClass('other_tab');jQuery(this).parent().siblings('.tab2').show();jQuery(this).parent().siblings('.tab1').hide(); return false;">Detail</a>
   </div>

醜いですが、うまくいきます。

これをクリーンアップしたいので、これらの関数を作成しようとしましたが、機能しません:

  <script>

  function showTabOne(){
  jQuery(this).siblings().removeClass('current_tab');
   jQuery(this).addClass('current_tab');
  jQuery(this).siblings().addClass('other_tab');
  jQuery(this).removeClass('other_tab');
  jQuery(this).parent().siblings('.tab1').show();
  jQuery(this).parent().siblings('.tab2').hide();     
  }
 function showTabTwo(){
  jQuery(this).siblings().removeClass('current_tab');
  jQuery(this).addClass('current_tab');
  jQuery(this).siblings().addClass('other_tab');
  jQuery(this).removeClass('other_tab');
  jQuery(this).parent().siblings('.tab2').show();
  jQuery(this).parent().siblings('.tab1').hide();
  return false;
  }

何か案は？