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

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

您可以在原生 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
}

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是所有拇指的父元素。至少我从你的代码中得到了什么。

超文本标记语言

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