使用:last-child和:带jQuery的first-child

时间:2012-12-11 02:14:39

标签: javascript jquery

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

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

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

3 个答案:

答案 0 :(得分:1)

您可能希望使用==

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

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

虽然杰克指出,这无论如何都行不通,因为它们是单独的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存储下一行,而不是[{1}}重新获得它。

此外,您将$('li.current')元素嵌套在<li>中,而它们只应嵌套在<div><ul><ol>中。

另外一个 - 变量<menu>是一个jQuery对象,因此在声明它之后,您不需要每次都想要访问它old。只需使用$(old)

最后,另一个问题是你的old.jQueryMethod()语句选择器:

if

表示找到具有$('#gallery:last-child') “图库”并且是最后一个子元素的元素。你可能想要:

id

这意味着找到子元素是父元素的最后一个$('#gallery > li:last-child') 子元素,其中li为“gallery”。

所以这是我对你最终代码的建议:

id

答案 1 :(得分:0)

您可以使用.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>

然后使用$('#controls .left')$('#controls .right')定位您的可点击元素。

修改

更高级的方法可能是这个,值得深思:

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

答案 2 :(得分:0)

<强> jsBin demo

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

<强> gallery Demo

P.S:而不是.hide(),您可以使用.removeClass('current')
而不是.show(),您可以使用.addClass('current')