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

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
}