jQuery：需要更改特定的列表元素

Question

目前我正在處理圖片庫應用程序。 它在li元素中有<img>。

代碼如下：

var $slideR_wrap = $(".slideRoller_wrapper"); 
 
var $slidesRoller = $slideR_wrap.find(".slidesRoller"); 
 
var $slideRoller = $slidesRoller.find(".slideRoller"); 
 
var $sliderImage = $slideRoller.find(".rollerImage");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slideRoller_wrapper"> 
 
    <ul class="slidesRoller" id="slidesRoller"> 
 
    <li class="slideRoller"> 
 
     <img class="rollerImage" src="../../assets/img/slider/1.jpg"> 
 
    </li> 
 
    <li class="slideRoller"> 
 
     <img class="rollerImage" src="../../assets/img/slider/2.jpg"> 
 
    </li> 
 
    <li class="slideRoller"> 
 
     <img class="rollerImage" src="../../assets/img/slider/3.jpg"> 
 
    </li> 
 
    <li class="slideRoller"> 
 
     <img class="rollerImage" src="../../assets/img/slider/4.jpg"> 
 
    </li> 
 
    </ul> 
 
</div>

如何定位的li的特定元素作爲一個數組元素？

當我做了console.log($sliderImage)，我得到了所有圖像的數組。 ，當我試圖$(".rollerImage")[0].css('opacity','1');，它提出了一個錯誤：

Uncaught TypeError: $(...)[0].css is not a function.

我需要通過使用一個數組索引來訪問特別li特定image。

這是我的項目的最後一步，我真的不想改變邏輯並重新開始。

Answer 1

你需要的是nth-child（）選擇器。

文檔：https://api.jquery.com/nth-child-selector/

實例：https://www.w3schools.com/jquery/sel_nthchild.asp

Answer 2

可以過濾$元件陣列：

$(".rollerImage").filter(function(i, $el){return i===0}).css('opacity','1'); 

Answer 3

$('.slideRoller').eq($index).css('opacity','1') 

$指數是位置 「裏」

$('.slideRoller').eq(0).css('opacity','1') 

Answer 4

您可以使用each()函數來遍歷列表元素。

$("#slidesRoller").each() 
var ele = []; 
$('#slidesRoller').children('list').each(function() { 
    ele.push(this); 
}); 
console.log(ele); //This will be having the list of `List` tag. 
console.log($(ele[0]).find("img")) // This will return the image in the first list. 
$(ele[0]).find("img").css("opacity","0") // Set the opacity.