このhtml要素の属性へのアクセス方法は？

Question

クリックされたhtml要素の属性（aria-controls）にアクセスしようとしています。

これは私のコードです：IこのHTML文字列、

alert($(this).html()); 

戻り値：

<li id="nav-host-status-tab" role="presentation" class="nav-host-tab active"> 
    <a href="#host-status" aria-controls="host-status" role="tab" data-toggle="tab"> 
     <i class="fa fa-tachometer"></i> Status 
    </a> 
</li> 

声明：

$(".nav-host-tab").click(function(e){ 
    alert($(this).html()); 
    // Try to access the aria-controls attribute of the clicked element 
}); 

これは.nav-host-tab要素のHTMLのコンテキストであります私が探している属性を明確に見ることができます：

<a href="#host-status" aria-controls="host-status" role="tab" data-toggle="tab"> 
     <i class="fa fa-tachometer"></i> Status 
</a> 

は、だから私はとaria-controls属性にアクセスしよう：

alert($(this).data('aria-controls')); 

しかし、それは返します

undefined 

もう一つの試み：

alert($(this).attr('aria-controls')); 

そしてそれはまた、返します。

undefined 

aria-controlsにはどのようにアクセスできますか？あなたは子要素を見つける必要がある

Answer 1

は、あなたが私達にあなたのHTML構造を与えられていないが、あなたは$(this).html()によって返されたHTMLでそれを見ている場合に

$(".nav-host-tab").click(function(e){ 
    //find the child element of .nav-host-tab 
    var a = $(this).find('a'); 
    a.attr('aria-controls'); 
}); 

Answer 2

から属性を取得しますが、

：$(this).attr("aria-controls")はそれを返しません、それはあなたがfindで見つけて（その後、その要素にattrを使用する）ことができ子孫要素、上にある必要がありますvar controls = $（this）.find（ "a [href = '＃ホストステータス]] [aria-controls]」）。attr（" aria-controls "）;

セレクタの一部は、.nav-host-tabの完全なHTML構造によってはオプションである場合があります。

今、あなたは私たちの構造を示したので、それはそう、子要素と実際にのみ子要素です：

var controls = $(this).children().attr("aria-controls"); 

か、より具体的にしたい場合：

var controls = $(this).children("a").attr("aria-controls"); 

または

var controls = $(this).children("[aria-controls]").attr("aria-controls"); 

など

Answer 3

あなたのクリックされた要素は、要素

alert($(this).find("a").attr('aria-controls')); 

Answer 4

私はこのヘルプを願っています:)

​​