如何确定 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');
                    }
                });

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

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

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

Answer 1

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

可以使用

is()

^[docs]方法来测试：

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

Answer 3

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

    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 5

在纯 JavaScript 中，您可以使用

element.matches()

。例如：

const thumbSelected = document.querySelector('.thumb-selected');
if (thumbSelected.matches(':first-child')) {
    // first child
} else if (thumbSelected.matches(':last-child')) {
    // last child
}