title: Jquery: get attribute value of an html element
body: <p>I'm working on an online quiz app. The quizes are divided in terms of chapters such that each chapter has its own quiz. Each chapter is attached to a menu and onclick on a menu, a chapter is loaded with some content and at the end there's a button to start a quiz. </p>
  
  <p>As the user takes the quiz, there's a button to navigate to the next question. on finishing the last question, the score for the quiz will be displayed alongside a button to click to be navigated to the next chapter. all this is to be done dynamically. what i want is, on this button that will navigate to the next chapter, i pass the id of the next chapter in this button</p>
  
  <p>This is the jquery bit that is handling the last part i've described above(the click event handles submission of a question):</p>
  
  <pre><code>$(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);
       });
  });
  </code></pre>
  
  <p>the variable <code>next_chapter</code> holds the entire html link for the next menu. i.e. </p>
  
  <p><code>console.log(next_chapter);</code> </p>
  
  <p>returns: </p>
  
  <p><code>&lt;a href="#signs-giving-orders" id="2" data-menu="2"&gt;Signs Giving Orders&lt;/a&gt;</code></p>
  
  <p>now what i want is to capture the <code>id</code> and pass it the button value. i've tried getting the id using both the <code>.find</code> and <code>.attr</code> methods as such:</p>
  
  <pre><code>var next_chapter = $("a[data-menu='" + next_menu +"']")[0].attr('id');
  var next_chapter = $("a[data-menu='" + next_menu +"']")[0].find('a').attr('id');
  </code></pre>
  
  <p>but both the above throw an error: <code>Uncaught TypeError: $(...)[0].attr is not a function</code> and  <code>Uncaught TypeError: $(...)[0].find is not a function</code> respectively.</p>
  
  <p>So in short, how do i retrieve the id of this dynamic result: <code>&lt;a href="#signs-giving-orders" id="2" data-menu="2"&gt;Signs Giving Orders&lt;/a&gt;</code></p>