Question

目前我正在使用图片库应用。它在<img>元素中有li。

代码如下：

＆＃13;

var $slideR_wrap = $(".slideRoller_wrapper");
var $slidesRoller = $slideR_wrap.find(".slidesRoller");
var $slideRoller = $slidesRoller.find(".slideRoller");
var $sliderImage = $slideRoller.find(".rollerImage");

＆＃13;

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

＆＃13;

如何将li的特定元素作为数组元素进行定位？

当我做console.log($sliderImage)时，我得到了所有图像的数组。当我尝试$(".rollerImage")[0].css('opacity','1');时，它引发了一个错误：

未捕获的TypeError：$（...）[0] .css不是函数。

我需要使用数组索引访问特定image特定li。

这是我项目的最后一步，我真的不想改变逻辑并重新开始。

Answer 1

你需要的是nth-child（）选择器。

文档：https://api.jquery.com/nth-child-selector/

示例：https://www.w3schools.com/jquery/sel_nthchild.asp

Answer 2

您可以过滤$ elements数组：

$(".rollerImage").filter(function(i, $el){return i===0}).css('opacity','1');

Answer 3

$('.slideRoller').eq( $index ).css('opacity','1')

$ index是一个位置“li”

$('.slideRoller').eq( 0 ).css('opacity','1')

Answer 4

您可以使用each()函数循环遍历列表元素。

$("#slidesRoller").each()
var ele = [];
$('#slidesRoller').children('list').each(function () {
    ele.push(this);
});
console.log(ele); //This will be having the list of `List` tag.
console.log($(ele[0]).find("img")) // This will return the image in the first list.
$(ele[0]).find("img").css("opacity","0") // Set the opacity.

jQuery：需要更改特定的列表元素

4 个答案: