HTML: Unordered List isn't ordered correctly

Question

I've been going around in circles for the last three hours trying to fix this, it's very odd...

I have an unordered list which is dynamically generated like so:

var numberOfSlides = 7;

for (i = 0; i < numberOfSlides; i++) {

    main.menu.append("<li class='ui-state-disabled'>List item " + i + "</a></li>");

}

This correct renders (all disabled):

List item 0
List item 1
List item 2
List item 3
List item 4
List item 5
List item 6

Later in the code I call a function that should activate a specified item:

enableMenuItem(2);

---

enableMenuItem: function(slideNumber){

    console.log("slideNumber: " + slideNumber); // log outputs "slideNumber: 2"

    $("ul li").eq(slideNumber).removeClass('ui-state-disabled'); // this doesn't work

}

It works fine for other values, but not 2, and I've found that if I call enableMenuItem(5), 2 is then activated.

The weird thing is if I do this...

$("ul li").eq(2).removeClass('ui-state-disabled');

...it works.

But this doesn't...

if(slideNumber === 2){
    console.log("slideNumber equals 2"); // logs "slideNumber equals 2", so the below line should execute
    $("ul li").eq(2).removeClass('ui-state-disabled'); // doesn't work
}

Am I going insane or is this very odd?

Answer 1

Since you are appending the items to main.menu you should bind the events to the same thing.
Like so:

main.menu.find("> li").eq(slideNumber).removeClass('ui-state-disabled');

If you have other unordered lists in the document $("ul li") will target them as well.

Answer 2

You have a typo in your declaration of your enableMenuItem method:

enableMenuItem: function(slideNumber){
  // Some code
}

You should declare it as:

function enableMenuItem(slideNumber) {
  // Some code
}

or

var enableMenuItem = function(slideNumber) {
  // Some code
}