jQuery：獲取html元素的屬性值

Question

我正在開發一個在線測驗應用程序。 測驗按照章節進行划分，以便每個章節都有自己的測驗。 每個章節都附加到菜單上，然后在菜單上單擊，在章節中加載了一些內容，最后還有一個按鈕來啟動測驗。

當用戶參加測驗時，有一個按鈕可以導航到下一個問題。 完成最后一個問題后，測驗分數將顯示在按鈕旁邊，並單擊以導航到下一章。 所有這些都是動態完成的。 我想要的是，在將導航到下一章的此按鈕上，我在此按鈕中傳遞下一章的ID。

這是處理上面描述的最后一部分的jquery位（click事件處理問題的提交）：

$(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並將其傳遞給按鈕值。 我試圖使用.find和.attr方法獲取ID，例如：

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

但是以上兩者均引發錯誤： Uncaught TypeError: $(...)[0].attr is not a function ， Uncaught TypeError: $(...)[0].find is not a function 。

簡而言之，我該如何檢索此動態結果的ID： <a href="#signs-giving-orders" id="2" data-menu="2">Signs Giving Orders</a>

Answer 1

是的，因為jQuery元素的.attr()方法不是本機的

這樣吧

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

另一種選擇

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

您也可以查看https://www.w3schools.com/jsref/met_element_getattribute.asp

還有https://developer.mozilla.org/en/docs/Web/API/Element/attributes

Answer 2

您不需要使用[0] ，它會返回對本機DOM元素的引用，因此會出現錯誤。

如要獲取屬性值，請直接在jQuery對象上使用.attr()

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