使用jQuery修改列表中的第n個鋰

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對象。

要獲取包含第i個元素的jQuery對象，請調用.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對象中的所有元素。