Question

我有以下代码，模仿左键或右键按下事件。这用作图库幻灯片的一部分：

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

基本上它会选择下一个或上一个兄弟（取决于按下的键）并调用click事件，该事件将在图库中显示相应的图像。这些图像都存储在无序列表中。

我感到困惑的是，当选择第一张或最后一张图像并分别点击左或右按钮时，我希望它能够在图像列表的另一端获得下一张图片。例如，如果选择第一个图像并按下左箭头;鉴于没有先前的图像（或li元素），它将获得列表中的最后一个图像。这样，密钥永远不会失去功能。

jquery中是否有一个函数可以检查当前元素是否是其父元素的第一个或最后一个子元素，或者返回其相对于父元素的索引，以便将其索引与size（）（子计数）进行比较他的父元素？

Answer 1

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

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

Answer 2

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

编辑 - 我更新了代码，因为使用next（）和prev（）代替nextAll（）和prevAll（）

更有意义

Answer 3

    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>

Answer 4

您可以像这样在本机JavaScript中执行此操作：

var thumbSelected = document.querySelector('.thumb-selected');

var parent = thumbSelected.parentNode;

if (thumbSelected == parent.firstElementChild) {
    // thumbSelected is the first child
} else if (thumbSelected == parent.lastElementChild) {
    // thumbSelected is the last child
}

如何确定元素是javascript / jquery中父元素的最后一个还是第一个子元素？

4 个答案: