Javascript 如何查找列表中的最后一个li并隐藏元素

在列表的最后一项中，我很难尝试取消隐藏元素。基本上，我有一个列表，通过查找类来隐藏和取消隐藏按钮

我的问题是当它在

问题是试图找到最后一个li和隐藏/取消隐藏按钮。它向列表中添加另一项，然后隐藏/取消隐藏按钮。在3C和另一个项目符号添加后，您可以在下面看到它，然后恢复正常

$（“#多单下一步”）。单击（函数（）{
让$item；
if（！$（'ul.pagination li.single data item.active'）.length）{
$item=$（'ul.pagnation li.single data item'）.first（）；
}
否则{
$prev=$（'ul.pagination li.single data item.active'）；
$item=$prev.next（）；
如果（！$prev.next（）.length）{
$prev.removeClass（'active'）；
$prev.hide（）；
回来
}
$prev.removeClass（'active'）；
$prev.hide（）；
}
$item.addClass（'active'）；
$item.show（）；
//分项
$（'ul.pagnation-2 li'）。removeClass（'active'）；
if（$item.hasClass（'has-multi-items'））{
const$sub=$item.find（'ul li'）.first（）；
$sub.addClass（“活动”）；
$sub.show（）；
$（“#多下一个多项目”）.css（'display'，'block'）；
$（'#multi-single-next'）.css（'display'，'none'）；
}
});
$（“#多下一个多项目”）。单击（函数（）{
const$item=$（'ul.pagnation-2 li.active'）；
const$next=$item.next（）；
$item.removeClass（'active'）；
$item.hide（）；
$next.addClass（'active'）；
$next.show（）；
如果（$item.is（':last child'））{
$（“#多下一个多项目”）.css（'display'，'none'）；
$（'#multi-single-next'）.css（'display'，'block'）；
}
});
。单个数据项{显示：无；}
ul.pagination-2 li{显示：无；}
#多下一个多项目{显示：无；}

下一个单曲
多项目

1
2


3a
3b
3c


4
5

1
2

3a
3b
3c
**
**
4
5

---

您是否在动态添加HTML？如果没有，您是否尝试删除代码中的多余行？

使用

数组的方法略有不同。您可以迭代并将元素设置为数组，然后维护当前可见元素的
索引。这就留下了在
单击事件期间解析树的麻烦


var项目=[]；
var currentIndex=0；
var当前项目；
$（文档）.ready（函数（）{
$（“.单个数据项”）。每个（（i，e）=>{
if（$（e）.hasClass（'has-multi-items'））{
[…$（e）.find（'li'）].forEach（i=>items.push（$（i）））
}否则{
items.push（$（$（e）.find（'div'））；
}
})
});
$（“#多单下一步，#多下一步多项目”）。单击（函数（）{
如果（当前项目）{
隐藏项（当前项）
}
currentItem=items[currentIndex%items.length]；
showItem（当前项）；
currentIndex++；
});
功能显示项（项）{
如果（项目是（'div'））{
item.parent（）.show（）；
$（“#多单下一步”）.show（）；
$（“#多下一个多项目”）.hide（）；
}否则{
item.show（）；
item.closest（'.single data item'）.show（）；
$（“#多单下一步”）.hide（）；
$（“#多下一个多项目”）.show（）；
}
}
函数隐藏项（项）{
如果（项目是（'div'））{
item.parent（）.hide（）；
}否则{
item.hide（）；
item.closest（'.single data item'）.hide（）；
}
}
。单个数据项{
显示：无；
}
ul.pagination-2 li{
显示：无；
}
#多下一个多项目{
显示：无
}

下一个单曲
多项目


1.


2.



3a
3b
3c



4.


5.

这里有一些更简单的逻辑，它基于所有
的集合，这些集合不是类
多项的集合

下一项由该集合中活动项的索引确定

两个按钮都可以使用一个单击处理程序


const$li=$（'.pagination li'）。not（'.has multi-items'），
$multi=$（“.有多个项目”）；
const$buttons=$（“#多单下一步，#多下一步多项目”）。单击（函数（）{
让$item；
//最容易始终隐藏多重文件，然后根据需要使用下面的“add（）”来显示父文件
$multi.hide（）；
if（！$li.filter（'.active'）.length）{
$item=$li.first（）；
}否则{
const$prev=$li.filter（'.active'）.removeClass（'active'）.hide（），
NEXTIX=$li.指数（$prev）+1；
$item=nextitx<$li.length？$li.eq（nextitx）：$li.first（）；
}
const$multipart=$item.closest（“.has multiitems”）
//根据父对象是否为多个切换按钮
const isMulti=$multiParent.length>0；
$buttons.first（）.toggle（！isMulti）
$buttons.last（）.toggle（isMulti）
//使用add（）包含父多维数据集（如果存在）以显示两者
$item.addClass（'active'）.add（$multiParent.show（）；
});
。单个数据项{
显示：无；
}
ul.pagination-2 li{
显示：无；
}
#多下一个多项目{
显示：无
}

下一个单曲
骡子
<li class="single-data-item has-multi-items">
  <ul class="pagnation-2">
    <li>3a</li>
    <li>3b</li>
    <li>3c</li>
  </ul>
</li>

if($item.is(':last-child')) {
    $('#multi-next-multi-item').css('display', 'none');
    $('#multi-single-next').css('display', 'block');
}

<ul class="pagnation">
<li class="single-data-item"><div class="data-item">1</div></li>
<li class="single-data-item"><div class="data-item">2</div></li>
<li class="single-data-item has-multi-items"><ul class="pagnation-2">
    <li>3a</li>
    <li>3b</li>
    <li>3c</li>
    **</ul></li>**
<li class="single-data-item"><div class="data-item">4</div></li>
<li class="single-data-item"><div class="data-item">5</div></li>
</ul>