如何确定元素是javascript/jquery中父元素的最后一个还是第一个子元素？
如何确定元素是javascript/jquery中父元素的最后一个还是第一个子元素？
提问于 2011-09-24 03:00:16
我有下面的代码，模拟点击左键或右键事件。这是用作图库幻灯片的一部分：
$(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() (子计数)进行比较？
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-09-24 03:12:35
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>Stack Overflow用户
发布于 2018-10-27 08:00:33
您可以在本地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
}Stack Overflow用户
发布于 2011-09-24 03:04:09
您可以使用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
}
}prevAll-我更新了代码，因为使用next()和prev()比使用nextAll()和prev()更有意义
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7533604
复制相关文章
相似问题