使用jQuery獲取第N個元素的數據屬性值

Question

我試圖從這個 jQuery 選擇器匹配的elements中獲取第一個元素的data屬性值，但它給了我一個錯誤：

$("p.expiryItem").get(0).attr("data-id")

未捕獲的類型錯誤：$(...).get(...).attr 不是函數(...)

然而它適用於這個：

$("p.expiryItem").attr("data-id")

如果我想使用第 N 個元素怎么辦？ 謝謝

Answer 1

問題是因為雖然get(N)返回匹配集中的第 N 個元素，但它返回沒有attr()方法的底層 DOMElement ，因此出現錯誤。

要解決此問題，您可以使用eq()執行相同的工作，但返回 jQuery 對象中的元素：

$("p.expiryItem").eq(0).data('id') // zero-based

或者你可以使用:nth-child選擇器：

$("p.expiryItem:nth-child(1)").data('id') // one-based

注意這里首選使用data()來檢索data-*屬性。

Answer 2

$("p.expiryItem:nth-child(1)").attr("data-id")

使用選擇器:nth-child()

請注意，它以 1 開頭

描述：選擇作為其父元素的第 n 個子元素的所有元素。

Answer 3

使用eq(n) 。

之間差get(n)和eq(n)是get返回JavaScript參考元件，但eq返回jQuery對象，其具有的功能attr()

$("p.expiryItem").eq(n).attr("data-id");

PS：

您可以將data()函數用於數據屬性。

$("p.expiryItem").eq(n).data("id");

Answer 4

您可以使用.eq() jQuery 方法。

例如。

HTML :

<p class="expiryItem" id="1">1</p>
<p class="expiryItem" id="2">2</p>
<p class="expiryItem" id="3">3</p>
<p class="expiryItem" id="4">4</p>
<p class="expiryItem" id="5">5</p>

JavaScript :

//For 2nd `p`
console.log("Attribute value of 2nd : "+$("p.expiryItem").eq(1).attr("id"));
//For 5th `p`
console.log("Attribute value of 2nd : "+$("p.expiryItem").eq(4).attr("id"));

JSFiddle