如何找到第一个“可见”的对象？在内使用 jQuery？

Question

我无法执行 $('ul li:first') 或 $('ul li:eq(0)') 因为它们选择的第一个项目不是必然是第一个可见项目。

我正在使用 jCarousel Lite 插件：

它的工作原理是通过给负数向左移动 ul每次单击“下一个”时，都会调整边距，并在单击“上一个”时将其向右移动。

我想给第一个可见列表项一个红色边框颜色。该插件不会向列表中第一个可见项目的标记添加任何内容，那么我如何定位它呢？

PS $('ul li:visible').is(':first') 也不起作用，因为该插件实际上并没有为不可见的 lis 提供任何 display none 属性。

Answer 1

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

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

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

Answer 2

有点繁琐的东西。这可以计算出应用于 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();

Answer 3

要选择第一个

，您需要执行以下操作：

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

当页面打开时，您是否能够计算出第一个可见项目（假设您知道有多少项目同时可见）最初加载？如果是，那么您可能可以通过监视单击上一个/下一个按钮来跟踪（例如，当单击下一个时，您将增加计算的位置）。

Answer 4

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

Answer 5

我从 CSS 中为第一个项目指定了红色边框颜色。

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

Answer 6

试试这个：

$('ul li').first(); // ta da?