My current project involves developing an Image Gallery app.
It uses <img> tags within li elements.
The code snippet is as follows:
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>I am trying to target a specific element of the li as an array element.
When I used console.log($sliderImage), it returned an array of all the images.
However, when I attempted to apply styles like
$(".rollerImage")[0].css('opacity','1');Uncaught TypeError: $(...)[0].css is not a function.
I need assistance with accessing a particular image within a specific li by using an array index.
This is the final step of my project and I really hope to resolve this without changing the entire logic and starting over.