クリック時の要素IDの取得

Question

jQueryを使用して実装したコードに、折りたたみ可能なセグメントがいくつかあります。

<h2 class="expand">Link1</h2> 
       <div class="collapse"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
        eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
        qui officia deserunt mollit anim id est laborum.</p>     
        <p class="top"><a href="#content">Top of page</a></p> 
       </div> 

上記のコードのようないくつかのより多くの同一のセクションがあります。このよう

。

私がクリックすると、これらの見出しのそれぞれのIDを取得したいと思います。 「Link1」をクリックすると、IDがポップアップされます。

私は既にポップアップでIDを表示する機能を定義しています。ここにあります：

$(document).ready(function() { 
     $("a").click(function (event) { 
      alert(event.target.id); 
     }); 
    }); 

アプリケーションを実行して「Link1」をクリックすると、空白の出力が表示されます。すべてのリンクのための別のクラスを宣言することはオプションのようですが、私は別の方法でそれをしたいと思っています。誰もこれらの要素のIDを取得する方法についての任意の代替案を提案できますか？

Answer 1

提供されたマークアップは、これらの要素にIDを指定していないことを示しています。そのように、彼らにIDを与えてみてください。

<a id="contentLink" href="#content">Top of page</a> 

次に、あなたが行うことができます：

$(document).ready(function() { 
    $("a").click(function (event) { 
     alert($(this).attr("id")); 
    }); 
}); 

編集：またはもしあなたが "ID" と言うとき、あなたのマークアップがHREFを持っているとして、あなたが実際に（HREF意味属性）、そして、あなたが行うことができます：あなたは、ハンドラがバインドされた要素を意味する場合

$(document).ready(function() { 
    $("a").click(function (event) { 
     alert($(this).attr("href")); 
    }); 
}); 

Answer 2

まず、あなたはthisを使用する必要があります。 a要素にバインドハンドラ、event.target.idはbになりながらthis.idがaになりますがある場合は

<a href="#content" id="a"><span id="b">foo</span></a> 

：これを考えてみましょう。 の意味がevent.targetの場合は、thisを使用してください。

第2に、id値は継承されません（実際には一意である必要があるため、それらが存在するかどうかはわかりません）。 aの要素にidの値を指定するか、文書をトラバースして関連する要素を見つけてidにする必要があります。

あなたはこのようなコードでこれを行うことができます：

$(this).closest('div').prev().attr('id') 

しかしあなたh2タグは、実際にidを持っていないので、あなたはそれを1つずつ与える必要があります。あなたがそのタグのテキストを取得したい場合は、text：

$(this).closest('div').prev().text()