javascript - 使用 :last-child and :first-child with jQuery

Question

我正在尝试编写我的第一个自建 jQuery 脚本，作为一个 super 简单的画廊。

CSS:

#gallery li{
        display:none;
    }

    #gallery li.current {
        display: block;
    }

HTML:

<div id="gallery">
    <li class="current"><img src="img/1.jpg" /></li>
    <li><img src="img/2.jpg" /></li>
    <li><img src="img/3.jpg" /></li>
    <li><img src="img/4.jpg" /></li>
</div>
<div id="controls">
    <span id="left">&#60;</span>
    <span id="right">&#62;</span>
</div>

JQUERY:

$(function(){
    $('#controls #left').click(function(){
        var old = $('li.current');
        $('li.current').removeClass('current');
        if (old = $('#gallery:first-child')){
            $('#gallery:last-child').addClass('current');
        }else{
        $(old).prev('li').addClass('current');
        }
    });
    $('#controls #right').click(function(){
        var old = $('li.current');
        if (old = $('#gallery:last-child')){
            $('#gallery:first-child').addClass('current');
        }else{
        $('li.current').removeClass('current');
        $(old).next('li').addClass('current');
        }
    });
});

在我添加 if/else 语句来检查我们是否正在查看第一个/最后一个图库图像之前，它一直运行良好。我想要这个声明，以便画廊循环。无法弄清楚为什么它不起作用，并且调试没有给我任何信息。

我能在正确的方向上得到一点插入吗？

编辑:使用下面的一些建议，这里是我所在的位置:

$(function(){
    $('#left').click(function(){
        var old = $('li.current');
        old.removeClass('current');
        if (old == $('#gallery li:first-child')){
            $('#gallery li:last-child').addClass('current');
        }else{
        old.prev('li').addClass('current');
        }
    });
    $('#right').click(function(){
        var old = $('li.current');
        old.removeClass('current');
        if (old == $('#gallery li:last-child')){
            $('#gallery li:first-child').addClass('current');
        }else{      
        old.next('li').addClass('current');
        }
    });
});

虽然仍然没有循环(在第一张图片上按“左”键会使画廊空白，在最后一张图片上按“右”键也是如此)

Answer 1

您可能希望使用 == :

if (old == $('#gallery:first-child')){

和

if (old == $('#gallery:last-child')){

虽然这无论如何都行不通，正如 Jack 所指出的，因为它们是单独的 jQuery 调用，可能会选择相同的元素并返回相似的 jQuery 对象，但不能用于比较，因为它们是 DOM 元素的独立集合。正确的方法是使用 .is就像我在下面提供的...或比较:

if (old[0] == $('#gallery:first-child')[0]){

像这样对它们进行索引会检索所选集中的第一个项目，它们是实际的 DOM 元素，并且可以进行比较。可能不是首选，但这并没有错。

这里有一个例子可以证明这是真的:http://jsfiddle.net/4adSj/

您还做了一些奇怪的事情。您不需要使用此选择器:$('#controls #right') - $('#right')非常独特，这要归功于 id应该使用。

此外，您存储 var old = $('li.current');然后下一行你不用费心使用old - 你像$('li.current')一样重新得到它.

此外，您正在嵌套 <li> <div> 中的元素, 当它们只应嵌套在 <ul> 中时, <ol> , 或 <menu> .

还有一个 - 变量 old是一个 jQuery 对象，所以你不需要做 $(old)每隔一段时间你想在你声明它之后访问它。只需使用 old.jQueryMethod() .

最后，另一个问题是您的 if 的选择器声明:

$('#gallery:last-child')

意味着找到具有 id 的元素“画廊”，是最后一个 child 。你可能想要:

$('#gallery > li:last-child')

这意味着找到最后一个子元素li带有 id 的父元素的子元素“画廊”。

所以这是我对您要使用的最终代码的建议:

$(function(){
    $('#left').on("click", function () {
        var old = $('li.current');
        old.removeClass('current');
        if (old.is(':first-child')){
            $('#gallery > li:last-child').addClass('current');
        } else {
            old.prev('li').addClass('current');
        }
    });

    $('#right').on("click", function () {
        var old = $('li.current');
        old.removeClass('current');
        if (old.is(':last-child')){
            $('#gallery > li:first-child').addClass('current');
        } else {
            old.next('li').addClass('current');
        }
    });
});