$（'。tabcont2：visible'）[0] .id is undefined

Question

我得到了多個選項卡表，並且其中有一個選項卡，因此我在打開選項卡1時出現javascript錯誤：$('.tabcont2:visible')[0].id未定義，當標籤2打開：$('.tabcont0:visible')[0].id ID未定義的，反正，希望日子會把你明白了一切，從碼：

<script type="text/javascript" src="/JS/tabcontent.js"></script> 
<script type="text/javascript"> 
    function initMenu0() { 
     $('#menu0 ul').hide(); 
     $('#menu0 li a').click(function() { 
      var checkElement = $(this).next(); 
      if ((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
       return false; 
      } 
      if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
       $('#menu0 ul:visible').slideUp('normal').siblings('a').removeClass('open_menu0'); 
       checkElement.slideDown('normal').siblings('a').addClass('open_menu0'); 
       return false; 
      } 
     }); 
     $("ul.reset a").click(function() { 
      $(this).closest("ul").siblings("a").addClass("open_menu0"); 
     }); 
    } 
    function showCurrentTab0() { 
     var curId = $('.tabcont0:visible')[0].id, 
      $curLink = $('a[rel="' + curId + '"]'); 

     $curLink.closest('ul').parent('li').children('a').click(); 
    } 

    function initMenu2() { 
     $('#menu2 ul').hide(); 
     $('#menu2 li a').click(function() { 
      var checkElement = $(this).next(); 
      if ((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
       return false; 
      } 
      if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
       $('#menu2 ul:visible').slideUp('normal').siblings('a').removeClass('open_menu2'); 
       checkElement.slideDown('normal').siblings('a').addClass('open_menu2'); 
       return false; 
      } 
     }); 

     $("ul.reset a").click(function() { 
      $(this).closest("ul").siblings("a").addClass("open_menu2"); 
     }); 
    } 
    function showCurrentTab2() { 
     var curId = $('.tabcont2:visible')[0].id, 
      $curLink = $('a[rel="' + curId + '"]'); 

     $curLink.closest('ul').parent('li').children('a').click(); 
    } 

    $(document).ready(function() { 
     initMenu0(); 
     showCurrentTab0(); 
     initMenu2(); 
     showCurrentTab2(); 
    }); 
</script> 

和html代碼：

<div class="block tabbox2"> 
<div class="tabbox2"> 
    <ul id="gstabs2" class="reset"> 
     <li><a rel="g1" class="selected" href="#">Micae</a></li> 
     <li><a rel="g2" href="#">Dahua</a></li> 
    </ul> 

    <div class="tabgreybox2"> 
     <div id="g1" class="tabcontent2"> 
      <div style="position:relative;min-height:430px;"> 
       <div style="position:absolute;left:-250px;top:-30px;"> 
        <div id="gstabs1"> 
         <ul id="menu0"> 
          <li> 
           <a href="#">Mobil DVR</a> 
           <ul class="reset"> 
            <li><a rel="gs1" class="selected" href="#">MDVR</a></li> 
            <li><a rel="gs2" class="selected" href="#">Client</a></li> 
           </ul> 
          </li> 
         </ul> 
        </div> 
       </div> 
       <div style="position:absolute;left:0;"> 
        <div class="block tabbox0"> 
         <div class="tabbox0"> 
          <div class="tabgreybox0"> 
           <div id="gs1" class="tabcont0"> 
           MDVR 
           </div> 
           <div id="gs2" class="tabcont0"> 
           Client 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <script type="text/javascript"> 
       var countries=new ddtabcontent("gstabs1") 
       countries.setpersist(true) 
       countries.setselectedClassTarget("link") 
       countries.init() 
      </script> 
     </div> 
     <div id="g2" class="tabcontent2"> 
      <div style="position:relative;min-height:430px;"> 
       <div style="position:absolute;left:-250px;top:-30px;"> 
        <div id="gstabs3"> 
         <ul id="menu2"> 
          <li> 
           <a href="#">Dökümanlar</a> 
           <ul class="reset"> 
            <li><a rel="s1" class="selected" href="#">PSS</a></li> 
            <li><a rel="s2" href="#">DVR</a></li> 
           </ul> 
          </li> 
         </ul> 
        </div> 
       </div> 
       <div style="position:absolute;left:0;top:0;"> 
        <div class="block tabbox0"> 
         <div class="tabbox0"> 
          <div class="tabgreybox0"> 
           <div id="s1" class="tabcont2"> 
            PSS 
           </div> 
           <div id="s2" class="tabcont2"> 
            DVR 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <script type="text/javascript"> 
       var countries=new ddtabcontent("gstabs3") 
       countries.setpersist(true) 
       countries.setselectedClassTarget("link") 
       countries.init() 
      </script> 
     </div> 
    </div> 

    <script type="text/javascript"> 
     var countries=new ddtabcontent("gstabs2") 
     countries.setpersist(true) 
     countries.setselectedClassTarget("link") 
     countries.init() 
    </script> 
</div> 
</div> 

Answer 1

交換

$('.tabcont0:visible')[0].id 

與

$('.tabcont0:visible:first').attr('id'); 

jQuery將理清休息。

---

添加[0]將引用實際的DOM元素，而不是jQuerys元素。如果該原始元素不存在，則任何其他函數都將導致錯誤。

Answer 2

只是猜測，因爲沒有設置的jsfiddle：

爲了jQuery的考慮因素是可見的，他們必須採取在頁面上的某個地方。由於父母是position: absolute;，因此它阻止使用:visible選擇器。 （http://api.jquery.com/visible-selector/）

:visible選擇器是一個jQuery擴展，也許使用.filter(":visible");將工作。