jQuery attr() 不会将 id 添加到 <li>

Question

当我加载我的网页时运行在 JS 控制台中执行以下命令

$('#toRead li')[2]

我得到以下返回：

<li class="bookToRead"> ... </li>

这是我所期望的。但是，当我使用 attr 方法添加 id 时，如下所示：

$('#toRead li')[2].attr('id', 'firstBook');

抛出如下错误--Uncaught TypeError: undefined is not a function

根据我的阅读，这是向元素添加 id 的方法。我一定是漏掉了什么。

Answer 1

您收到错误消息是因为您引用的是 DOM 元素而不是 jQuery 对象。

如果你使用 eq api 它将 return 一个 jQuery 对象：

$('#toRead li').eq(2).attr('id', 'firstBook');

在这里，您将从选择器中设置第 3 个 returned li 的 id 属性。

Answer 2

attr 是一个 jQuery 对象方法 - 当您 select 指定索引 [2] 时，您将返回一个 DOM 元素，所以你可以使用 setAttribute

$('#toRead li')[2].setAttribute('id', 'firstBook');

Answer 3

你可以这样做

var bookToRead = $('#toRead li')[2];
$(bookToRead ).attr('id', 'firstBook');

jQuery attr() won't add an id to <li>