javascript - jQuery addClass() / removeClass() 不工作

Question

<ul>
    <li class="selected"></li>
    <li></li>
    <li></li>
</ul>

那是我的html。我现在使用的选择器是：

    $("ul li:eq(0)").removeClass('selected');
    $("ul li:eq(1)").addClass('selected');

问题是我无法从这些元素中添加或删除“选定”类。html 和 jquery 都非常简单，并且我能找到的许多示例都以相同的方式进行，包括官方 jQuery 文档。（脚本在正文标记之前加载，如果重要的话）

为什么我不能像这样删除和添加类？

整个html页面在这里

score 6 · Accepted Answer

可能是因为你忘了添加$(document).ready()，还要确保你添加了 jquery.min.js 文件

$(document).ready( function () {
    $("ul li:eq(0)").removeClass('selected');
    $("ul li:eq(1)").addClass('selected');
});

score 2 · Accepted Answer

代码看起来正确，问题一定出在其他地方。如何调试这个：

查看选择器匹配了多少个元素：
```
console.log($("ul li:eq(1)").length);
```
如果您看到 0，则选择器不匹配任何内容。
哪个元素匹配？
```
console.log($("ul li:eq(1)")[0]);
```
大多数浏览器允许检查控制台中的元素。

一个典型的问题是您的代码在元素存在之前执行。在简单的情况下，您只需要在 DOM 准备好后运行您的代码：

$(function () {
    ...DOM is now ready...
});

但有时，其他脚本会创建元素。如果您遇到这种情况，您需要告诉我们您使用哪些框架和脚本来构建/操作 DOM。

有关的：

score 0 · Accepted Answer

$("ul li:eq(0)").removeClass('selected');
$("ul li:eq(1)").addClass('selected');

但是是的，你需要等到 DOM 准备好用 jquery 做一些事情

$(function () {
    $("ul li:eq(0)").removeClass('selected');
    $("ul li:eq(1)").addClass('selected');
});

3 回答 3