javascript - 使用 Jquery 更改单个 'LI' 数组元素的 CSS

Question

我是 Javascript 和 jQuery 的新手。

我制作了一个简单的图像 slider 并遇到了 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”元素？提前感谢您的帮助。

Answer 1

jQuery 对象的数字属性引用 DOM 元素，而不是 jQuery 对象。

如果你想调用 jQuery 方法，你必须用 jQuery 对象包装元素。

$( $mySlides[0] ).css(...)