使用Jquery更改单个“LI”数组元素的CSS

Question

我是Javascript和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'元素？ 感谢您的帮助。

Answer 1

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

如果要调用jQuery方法，则必须使用jQuery对象包装元素。

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

Answer 2

$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>