Jquery：html要素の属性値を取得

Question

私はオンラインクイズアプリで作業しています。クイズは章ごとに分けられ、各章には独自のクイズがあります。各章はメニューに添付され、メニュー上ではonclick、章にはいくつかのコンテンツがロードされ、最後にはクイズを開始するボタンがあります。

ユーザーがクイズを受け取ると、次の質問に移動するボタンがあります。最後の質問を終えると、次の章に移動するためにクリックするボタンの横にクイズのスコアが表示されます。これはすべて動的に行われます。私が望むものは、次の章に移動するこのボタンに、このボタンの次の章のIDを渡します。

これは、上記の最後の部分を処理しているjqueryビットですイベントは）質問の提出を処理します。

$(document).ready(function(){ 
    $("#page-content-wrapper").on('click', '.questionform #submit', function(e) 
    { 
      //more code before this 
      var next_chapter = $("a[data-menu='" + next_menu +"']")[0]; 
      console.log(next_chapter); 
    }); 
}); 

変数next_chapterは、次のメニューのための全体のHTMLリンクを保持しています。すなわち

console.log(next_chapter);

リターン：

<a href="#signs-giving-orders" id="2" data-menu="2">Signs Giving Orders</a>

は今、私が欲しいものidをキャプチャし、それをボタンの値を渡すことです。それぞれUncaught TypeError: $(...)[0].attr is not a functionとUncaught TypeError: $(...)[0].find is not a function：

var next_chapter = $("a[data-menu='" + next_menu +"']")[0].attr('id'); 
var next_chapter = $("a[data-menu='" + next_menu +"']")[0].find('a').attr('id'); 

が、上記スローエラーの両方：私は、次のような両方.findと.attrメソッドを使用してIDを取得しようとしました。

だから、要するに、どのように私はこのダイナミックな結果のIDを取得します：<a href="#signs-giving-orders" id="2" data-menu="2">Signs Giving Orders</a>

Answer 1

はい、1

ネイティブではないjQueryの要素の.attr()方法は、したがって、この

var next_chapter = $("a[data-menu='" + next_menu +"']")[0].id; 

を行うので、もう1つのオプション

var next_chapter = $("a[data-menu='" + next_menu +"']")[0].getAttribute('id'); 

Aあなたはhttps://www.w3schools.com/jsref/met_element_getattribute.asp

そして https://developer.mozilla.org/en/docs/Web/API/Element/attributes

Answer 2

あなたは[0]を使用する必要はありませんを確認することができますLSO、それはこのようにあなたがエラーになったネイティブDOM要素への参照を返します。

あなたは属性値を取得したいと、直接jQueryオブジェクトに.attr()を使用

var next_chapter = $("a[data-menu='" + next_menu +"']").attr('id'); 
                 //Notice [0] is removed