如何判断元素是否是javascript/jquery中父元素的最后一个或第一个子元素？

问题描述：

我有以下代码，模拟左键或右键按下事件的点击。这是作为一个画廊幻灯片的一部分：如何判断元素是否是javascript/jquery中父元素的最后一个或第一个子元素？

$(document).keydown(function (e) { 
        if(e.keyCode == 37) { // left 
         $(".thumb-selected").prev().trigger('click'); 
        } 
        else if(e.keyCode == 39) { // right 
         $("thumb-selected").next().trigger('click'); 
        } 
       });

本质上它选择下一个或前一个兄弟（取决于按下的键），并调用点击事件，将依次在画廊显示相应的图像。这些图像全部存储在无序列表中。

我被迷惑的地方在于，当选择第一张或最后一张图像并单击左键或右键时，我希望它获得图像列表另一端的下一张图像。例如，如果选择第一个图像并按下左箭头，假定没有以前的图像（或li元素），它会得到列表中的最后一幅图像。这样的关键从未失去功能。（）（child count（））（child count（））（）（child count）在jquery中是否有一个函数会检查当前元素是其父项的第一个还是最后一个子元素，或者返回它的索引相对于它的父元素，）他的父母元素？

你可以问父对象是什么第一/最后的孩子们，并与当前的元素进行比较。没有关于性能的想法。 – 2011-09-23 19:05:51

性能不是问题。从我读过的内容来看，不可能比较两个选择器元素（作为对象）。我可以尝试比较这些id，但是没有id被设置在脚本自动生成的列表项上。我试图尽可能不修改脚本。 – Prusprus

答

var length = $('#images_container li').length; 
    if(e.keyCode == 37) { // left 
     if($('.thumb-selected').index() > 0) 
       $(".thumb-selected").prev().trigger('click'); 
     else 
       $('.thumb-container').eq(length-1).trigger('click'); 
    } 

    else if(e.keyCode == 39) { // right 
     if($('.thumb-selected').index() < length-1) 
      $("thumb-selected").next().trigger('click'); 
      else 
       $('.thumb-container').eq(0).trigger('click'); 
    }

.thumb-container是的父元素所有的拇指。至少我从你的代码中得到了什么。

HTML

<ul class="thumb-container"> 
     <li>thumb</li> 
     <li>thumb</li> 
      . 
      . 
      . 
    </ul>

是的，这是列表的结构。 index（）调用似乎有效。我会试试这个。 – Prusprus

这很好。我的代码中只有当在列表的另一端调用li元素时（if条件失败时），我的选择器是$（“。li .thumb-container li”），它带有一个简单的last（）或first （）函数指向正确的元素来触发。 – Prusprus

答

您可以使用index()，它返回元素的索引，或者您可以使用prev（）和next（）来检查是否还有一个元素。

if(e.keyCode == 37) { // left 
    if($(".thumb-selected").prev().length > 0)){ 
     $(".thumb-selected").prev().trigger('click'); 
    }else{ 
     //no more elements      
     } 
} 
else if(e.keyCode == 39) { // right 
    if($(".thumb-selected").next().length > 0)){ 
     $(".thumb-selected").next().trigger('click'); 
    }else{ 
     //no more elements      
     } 
}

编辑 - 我更新的代码，因为它使下一个要使用更有意义（）和prev（）而不是nextAll（）和prevAll（）

prevAll（）看起来像个好主意，我不确定为什么prev（）会更好地获得长度。无论如何，似乎都不起作用（一直返回0）。我将开始阅读这个函数;会让你知道我找到了什么。 – Prusprus

你是什么意思它重新调整0？看看这里（http://jsfiddle.net/NkWRK/）或告诉我们你的标记。 prev（）和next（）更好，因为我只看一个元素，他们更快 –

答

可以使用is()^[docs]方法来测试：

if($(".thumb-selected").is(':first-child')) { 
    // whatever 
} else if($(".thumb-selected").is(':last-child')) { 
    // whatever 
}

如何判断元素是否是javascript/jquery中父元素的最后一个或第一个子元素？

相关推荐