Question

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

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>

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

2 个答案: