如何找到第一个“可见”的;& lt; li>在<ul>使用jQuery

How to find the first "visible" <li> inside a <ul> using jQuery?

本文关键字：li ul jQuery 使用 lt 何找 第一个 可见      更新时间：2023-09-26

我不能做$('ul li:first')或$('ul li:eq(0)')，因为它们选择的第一个项目不一定是第一个可见项目。

我正在使用jCarousel Lite插件:

它的工作原理是每次点击next时通过给它负边距来向左移动ul，点击prev时向右移动ul。

我想给第一个可见列表项一个红色的边框颜色。插件没有添加任何标记的第一个可见项目在列表中，所以我怎么能瞄准它?

注:$('ul li:visible').is(':first')也不会工作，因为插件实际上并没有给不可见的列表任何显示无属性。

From: http://www.gmarwaha.com/jquery/jcarousellite/#doc您可以使用afterEnd回调函数:

afterEnd -动画结束后应该调用的回调函数。表示动画结束后可见的项的元素作为参数传入。

$(".carousel").jCarouselLite({
    btnNext: ".next",
    btnPrev: ".prev",
    afterEnd: function(a) {
       $(a[0]).addClass("redBorder");
   }
});

有点繁琐。这将计算出应用于jCarousel的left偏移量，将其除以内部li项的宽度，以计算出该li的剩余数量，然后将其转换为内部的:eq()。

var firstVisibleListItem = 0 - (parseInt($('.jCarouselLite ul').css('left')) / parseInt($('.jCarouselLite ul li').css('width'))) + 1
$('.jCarouselLite ul li').filter(':eq(' + firstVisibleListItem + ')').hide();

选择第一个<li>，您可以这样做:

$('ul li').filter(":first");   // best performance, as indicated in the API documentation

你能算出第一个可见的项目(假设你知道有多少项在同一时间可见)，当页面最初加载?如果是，那么你可以通过监控上一个/下一个按钮被点击来跟踪(例如，当下一个按钮被点击时，你会增加你的计算位置)。

试试这个:)$('ul li:first-child')我总是用它

我将第一项的边框颜色设置为红色。

.jCarouselLite ul li:first-child{
    border: 1px solid red;
}

试试这个:

$('ul li').first(); // ta da?
相关文章：