Javascript 在jQuery中使用：last child和：first child

我正在尝试编写我的第一个自建jQuery脚本，作为一个超级简单的库

CSS:

HTML:

在我添加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');
        }
    });
});

---

但是仍然没有循环（在第一张图像上按“左”键会使库变为空白，在最后一张图像上按“右”键也会变为空白）

您可能需要使用

=

：

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

及

尽管正如杰克所指出的那样，这无论如何都不起作用，因为它们是单独的jQuery调用，可以选择相同的元素并返回相似的jQuery对象，但不能用于比较，因为它们是DOM元素的单独集合。正确的方法是使用

.is

就像我在下面提供的…或进行比较：

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

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

下面是一个证明这一点的例子：

你也在做一些奇怪的事情。您不需要使用此选择器：

$（“#控件#右”）

-

$（“#右”）

由于应如何使用

id

而足够独特

此外，还存储

var old=$（'li.current'）

然后下一行就不用麻烦使用

旧的了

——你得到的是

$（'li.current'）

此外，您正在将

元素嵌套在
中，而它们只应嵌套在
、
或
中

还有一个-变量
old
是一个jQuery对象，因此您不需要每隔一段时间在声明后访问它一次
$（old）
。只需使用
old.jQueryMethod（）

最后，另一个问题是
if
语句的选择器：

$('#gallery:last-child')

表示查找具有
id
“gallery”并且是最后一个子元素的元素。您可能想要：

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

这意味着查找id为“gallery”的父元素的最后一个
li
子元素的子元素

下面是我对最终代码的建议：

$(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');
        }
    });
});

您可以使用
.is（':first child）
和
.is（':last child'）
分别找出某个对象是第一个还是最后一个子对象：

$('#controls #left').click(function() {
    var old = $('li.current')
        .removeClass('current');

    if (old.is(':first-child')) {
        // search the siblings for the last child
        old.siblings(':last-child').addClass('current');
    } else {
        $(old).prev('li').addClass('current');
    }
});

$('#controls #right').click(function() {
    var old = $('li.current')
        .removeClass('current');

    if (old.is(':last-child')) {
        old.siblings(':first-child').addClass('current');
    } else {
        $(old).next('li').addClass('current');
    }
});

​
顺便说一句，我会将您的HTML更改为：

<div id="controls">
    <span class="left">&#60;</span>
    <span class="right">&#62;</span>
</div>


var c = 0; 
var imgN = $('#gallery li').length; // 4   
$('#left, #right').click(function(){
  c = this.id=='right' ? ++c : --c ;
  $('#gallery li').hide().eq( c%imgN ).show(); 
}); 

甚至：

var c = 0; 
$('#left, #right').click(function(){
  $('#gallery li').hide().eq( (this.id=='right'?++c:--c) % 4 ).show(); 
}); 


var c = 0; 
var imgN = $('#gallery li').length; // 4   
$('#left, #right').click(function(){
  c = this.id=='right' ? ++c : --c ;
  $('#gallery li').hide().eq( c%imgN ).show(); 
}); 

附言：您可以使用
.removeClass（'current'）


你可以使用
.addClass（'current'）
old=$（“#图库：最后一个孩子”）
而不是
.show（）。然而，即使包括这一点，它也不起作用。什么不起作用？预期结果是什么？@RicardoLohmann错了，你不能在对象上使用
=
。@jack
old[0]=$（“#gallery:last child”）[0]
修复了它。按照Ricardo的建议这样做了，但仍然不起作用（代码现在向左/向右循环，但不像它应该做的那样循环）@Jascination查看我的更新。我想这是你在你的
if
语句中使用的条件，这就是我要说的，减去
#gallery>李：第一个孩子
。你能简单地解释一下这和第一个孩子之间的区别吗。您不能将对象与
=
进行类似的比较。它将始终是
false
考虑到它没有循环（与您的编辑一起），这可能是正确的。这一个使它工作，似乎是用最少的代码实现预期结果的最佳方法。作为一个JS/jquery的绝对初学者，很高兴学习到一种更好的方法，干杯。尽管你错了，你不能比较对象。您可以轻松地比较旧[0]=$（“#图库：第一个孩子”）[0]
。不可取，但是…@Ian我没说你不能。。。你不会喜欢的；当然，比较两个DOM元素会像预期的那样工作。
<div id="controls">
    <span class="left">&#60;</span>
    <span class="right">&#62;</span>
</div>

// wrap the functionality inside an anonymous function
// localizing the gallery and controls blocks
(function($gallery, $controls) {
    var pos = 0;

    // this function performs the actual move left and right, based on event data being passed in via evt.data.delta
    function move(evt) {
        var $items = $gallery.children(), // if the gallery never changes size you should cache this value
        max = $items.length;

        $items.eq(pos).removeClass('current');
        pos = (pos + evt.data.delta) % max; // update the position
        $items.eq(pos).addClass('current');
    }

    // attach the controls
    $controls
        .on('click', '.left', {
            delta: -1 // left decreases the position
        }, move)
        .on('click', '.right', {
            delta: 1 // right increases the position
        }, move);

    // make sure the first is always selected
    $gallery.children().removeClass('current').eq(pos).addClass('current');

}($('#gallery'), $('#controls')));​​​​​​​​​ // immediate invocation

var c = 0; 
var imgN = $('#gallery li').length; // 4   
$('#left, #right').click(function(){
  c = this.id=='right' ? ++c : --c ;
  $('#gallery li').hide().eq( c%imgN ).show(); 
}); 

var c = 0; 
$('#left, #right').click(function(){
  $('#gallery li').hide().eq( (this.id=='right'?++c:--c) % 4 ).show(); 
});