HTML: Unordered Список не упорядочен правильно

Question

Я шел вокруг в кругах в течение последних трех часов, пытаясь исправить это, очень странно ...

У меня есть неупорядоченный список, который динамически генерируется как так:

var numberOfSlides = 7; 

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

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

} 

Это правильно делает (все отключено):

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

Позже в коде вызова функции, которая должна активировать указанный элемент:

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 

} 

Он отлично работает для других значений, но не 2, и я обнаружил, что если я называю EnableMenuItem (5), 2 затем активируется.

Странная вещь, если я делаю это ...

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

... это работает.

Но это не ...

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 
} 

ли я схожу с ума, или это очень странно?

Answer 1

Поскольку вы добавления элементов до main.menu вы должны привязать события к одному и тому же.
Как так:

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

Если у вас есть другие неупорядоченные списки в документе $("ul li") будет предназначаться для них, а также.

Answer 2

У вас есть опечатка в вашем объявлении вашего enableMenuItem метода:

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

Вы должны объявить его как:

function enableMenuItem(slideNumber) { 
    // Some code 
} 

или

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