Question

我正在尝试从此jQuery选择器匹配的data中获取第一个元素的elements属性值，但它给了我一个错误：

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

未捕获的TypeError：$（...）。get（...）。attr不是函数（...）

然而它适用于此：

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

如果我想使用第N个元素怎么办？感谢

Answer 1

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

使用选择器:nth-child()

请注意，它以1
开头
描述：选择所有父元素的第n个子元素。

Answer 2

问题是因为尽管get(N)返回匹配集中的第N个元素，但它返回没有attr()方法的基础DOME元素，因此返回错误。

要解决此问题，您可以使用执行相同工作的eq()，但返回jQuery对象中的元素：

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

或者您可以使用:nth-child选择器：

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

请注意，此处data()的首选用途是检索data-*属性。

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

使用jQuery获取第N个元素的数据属性值

4 个答案: