jQuery addClass（）/ removeClass（）无法正常工作

Question

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

That is my html. And the selectors I am using right now are:

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

Problem is that I can not add or remove the 'selected' class from these elements. The html and jquery are both pretty straight-forward and as many examples as I could find did everything the same way, including official jQuery docs. (The script is loaded before the body tag, if it matters)

Why can't I remove and add the classes like this?

The entire html page here

Answer 1

probably because you forgot to add $(document).ready() ,also make sure you added the jquery.min.js file

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

Answer 2

The code looks correct, the problem must be elsewhere. How to debug this:

1. Look at how many elements the selector matches:

    console.log($("ul li:eq(1)").length); 

   If you see 0, then the selector didn't match anything.

2. Which element did match?

    console.log($("ul li:eq(1)")[0]); 

   Most browsers allow to examine the element in the console.

A typical problem is that your code is executed before the elements exist. In the simple case, you just need to run your code after the DOM is ready:

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

But sometimes, other scripts will create elements. If that's the case for you, you'll need to tell us which frameworks and scripts you use to build / manipulate the DOM.

Related:

• Debugging your selectors in jQuery

Answer 3

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

works for me ( http://jsfiddle.net/orlando/rhtqA/ )

but yeah you need to wait till DOM is ready to do stuff with jquery

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