javascript - 使用jQuery更改单个“LI”数组元素的CSS

我是Java和jQuery的新手。

我制作了一个简单的图像滑块，并遇到了jQuery问题。

我的图片列表包含以下html：

<div id = "slider-auto">
   <ul class= "slides">
       <li class = "slide"><img src="Images/one.jpg"/></li>
       <li class = "slide"><img src="Images/two.jpg"/></li>
       <li class = "slide"><img src="Images/three.jpg"/></li>
       <li class = "slide"><img src="Images/four.jpg"/></li>
       <li class = "slide"><img src="Images/five.jpg"/></li>
       <li class = "slide"><img src="Images/one.jpg"/></li>
   </ul>
</div>

我试图将'li'元素存储在变量（数组）中，并使用jQuery更改特定'li'元素的CSS。

以下工作正常：

$(document).ready(function(){

    $slideContainerMan = $('#slider-auto');
    $mySlides = $slideContainerMan.find('.slide');

    $mySlides[0].style.display = "block";

})

如果我使用jQuery访问第一个列表元素的CSS，则会收到错误消息：

$(document).ready(function(){

    $slideContainerMan = $('#slider-auto');
    $mySlides = $slideContainerMan.find('.slide');

    $mySlides[0].css('display','block');

})

上面的代码产生“ $ mySlides [0] .css不是函数”。

我假设这不是使用jQuery访问数组元素的正确方法。
如何使用jQuery单独访问'li'元素？
感谢您的帮助。

最佳答案

$mySlides[0]返回li元素，而不是jquery对象，因此不能在其上使用css函数。
您可以做的是在该元素$(element)上使用jQuery构造函数，或者使用first()函数获取该包装的元素：

$(document).ready(function(){

    $slideContainerMan = $('#slider-auto');
    $mySlides = $slideContainerMan.find('.slide');

    // option 1:
    $($mySlides[0]).css('display','block');

    // option 2:
    $mySlides.first().css('display','block');

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "slider-auto">
   <ul class= "slides">
       <li class = "slide"><img src="Images/one.jpg"/></li>
       <li class = "slide"><img src="Images/two.jpg"/></li>
       <li class = "slide"><img src="Images/three.jpg"/></li>
       <li class = "slide"><img src="Images/four.jpg"/></li>
       <li class = "slide"><img src="Images/five.jpg"/></li>
       <li class = "slide"><img src="Images/one.jpg"/></li>
   </ul>
</div>