アクティブクラス

Question

に基づいて、データ属性の値を取得し、私は
ul > li class = "activeTab"

に基づいて、データ属性data-itemtypeの値を取得したいここに私のコードです。 class="activeTab"が最初<li>要素である場合

<ul class="tabs"> 
    <li data-itemtype="1" class="activeTab"><a href="#tab1">Published</a></li> 
    <li data-itemtype="0" class=""><a href="#tab2">Unpublished</a></li> 
</ul> 

、この場合には1すなわち最初のli要素のデータ属性を取得し、それ故に同じことが第二またはLi要素の任意の数に適用されます。

私はこの

var itemType = $('ul.tabs').find('li.activeTab').attr('data-itemtype'); 

を試み、それが動作しません。それは未定義の値を示します。

更新：

私はタブを使用しています。私はどのタブが現在アクティブであるかを知りたいし、javascript変数でその値が必要です。

ここは自分のHTMLコードです。

<div class="widget"> 
    <ul class="tabs"> 
     <li data-itemtype="1"><a href="#tab1">Published</a></li> 
     <li data-itemtype="0"><a href="#tab2">Unpublished</a></li> 
    </ul> 
    <div class="tab_container"> 
     <div id="tab1" class="tab_content"> 
      <div class="widget" style="margin-top:0px;"> 
       <div class="title"><img src="/images/icons/dark/cart3.png" alt="" class="titleIcon" /><h6>Published Items</h6></div>       
       <p>Content</p> 
      </div> 
     </div> 
     <div id="tab2" class="tab_content"> 
      <div class="widget" style="margin-top:0px;"> 
       <div class="title"><img src="/images/icons/dark/cart3.png" alt="" class="titleIcon" /><h6>Unpublished Items</h6></div> 
       <p>Content</p> 
      </div> 
     </div> 
    </div> 
    <div class="clear"></div>   
</div> 

jQueryが使用されています。

$.fn.contentTabs = function(){ 

     $(this).find(".tab_content").hide(); //Hide all content 
     $(this).find("ul.tabs li:first").addClass("activeTab").show(); //Activate first tab 
     $(this).find(".tab_content:first").show(); //Show first tab content 

     $("ul.tabs li").click(function() { 
      $(this).parent().parent().find("ul.tabs li").removeClass("activeTab"); //Remove any "active" class 
      $(this).addClass("activeTab"); //Add "active" class to selected tab 
      $(this).parent().parent().find(".tab_content").hide(); //Hide all tab content 
      var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
      $(activeTab).show(); //Fade in the active content 
      return false; 
     }); 

    }; 
    $("div[class^='widget']").contentTabs(); //Run function on any div with class name of "Content Tabs" 

上記コードは私にとっては機能しません。

Answer 1

正常に動作しているようです。

私が代わりに.data(...)を使用します。

var itemType = $('ul.tabs').find('li.activeTab').data('itemtype'); 
alert(itemType); 

フィドル：http://jsfiddle.net/maniator/2GYxh/