Изменение nth li в списке с помощью jquery

Question

Я пытаюсь что-то очень простое, но я просто не могу понять, почему это не сработает.Я могу получить информацию об объекте, используя [i], но я не могу изменить данные таким образом?

    // Make all the li's invisible
$('div#rotator ul li').css({opacity: 0.0});

// Calculate a random number between 1 and 3
var randnr = Math.floor((1-4)*Math.random()) + 4;

for(var i = 0; i < $('#rotator ul li').length; i++) {

            // Make the i element appear
    $('#rotator ul li')[i].css({opacity: 1.0});
}

Answer 1

jQuery-объекты - это массивы-подобные объекты, которые можно использовать как массив необработанных элементов DOM.
Поэтому $(...)[i] получает i-й необработанный элемент DOM , а не объект jQuery, содержащий его.

Чтобы получить объект jQuery, содержащий i-й элемент, вызовите метод .eq() , например:

$('#rotator ul li').eq(i).css({opacity: 1.0});

Вы также можете использовать селектор :eq :

$('#rotator ul li:eq(i)').css({opacity: 1.0});

---

Однако вам не нужен цикл вообще; Вы можете скрыть все элементы сразу:

$('div#rotator ul li').css({opacity: 1.0});

Answer 2

Вы получаете эту проблему, потому что когда вы используете индексы массива, вы получаете элемент DOM, а css() - это метод для объекта jQuery. Так что вы можете сделать:

$($("#rotator ul li")[i]).css("opacity", 1.0);

Конечно, это неудобно, поэтому вы можете использовать eq():

$("#rotator ul li").eq(i).css("opacity", 1.0);

Но вы делаете это изменение во всех элементах набора, поэтому простое решение, чем цикл, заключается в следующем:

$("#rotator ul li").css("opacity", 1.0);

Это будет применять CSS ко всем элементам в объекте jQuery.