组内 jquery 选择器的问题和循环元素

Question

我的问题是2折。我有以下代码：

$photosContainer = $("#photos-fs")
$photos = $photosContainer.find(".photo");
$length = $photos.length;

if ($length > 1) {
    setTimeout(showNextPhoto, 3000);
}

function showNextPhoto() {

    //$current = $photos.eq(0); <-- this works
    //$next = $photos.eq(1); <-- this works

    $current = $photos.find(".current"); <-- this does not
    $next = $current.next(); <-- this does not

    //do stuff with the selected elements here
}

我想要实现的基本上是找到容器中的 .current classed 元素及其下一个兄弟（或者组中的第一个，如果当前是最后一个），然后通过添加它们来制作动画css class 是的。问题是，虽然我可以使用 .eq(0) 和 .eq(1) 获得这些元素，但在使用 class (.current) 或下一个 ( ）功能。如果我控制台记录对象我得到正确的对象吗？

我一直使用 find(".blahblah") 方法在组内 classed 元素之间导航，所以不确定为什么它在这里不起作用？不过可能有些愚蠢？

供参考，这是 html 结构：

<div id="photos-fs">
    <div class="photo current" style="background-image: url(images/fs-image-01.jpg);"></div>
    <div class="photo" style="background-image: url(images/fs-image-02.jpg);"></div>
</div>

此外，是否有一种美观且优雅的方法来测试最后一项，所以如果当前项目是最后一项（可能使用 .last？），您能否也与我分享一下？

干杯！

Answer 1

您需要在声明中使用.filter() instead of .find()。

使用

$photos.filter(".current");

而不是

$photos.find(".current");

测试最后一个项目，所以如果当前项目是最后一个

您可以使用.is()

yourElement.is(':last')

组内 jquery 选择器的问题和循环元素

Issue with jquery selectors within group & looping over elements

javascript

jquery

jquery-selectors