Question

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

我正在使用jCarousel Lite插件：

它的工作原理是将ul向左移动，每次点击下一个时给它带有负边距，并在点击上一个时向右移动。

我想给第一个可见列表项添加红色边框颜色。该插件不会为列表中的第一个可见项添加任何内容，因此如何定位它？

P.S。 $('ul li:visible').is(':first')无法正常工作，因为插件实际上不会给不可见的lis任何display none属性。

Answer 1

有点繁琐。这可以解决应用于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 2

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

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

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

Answer 3

要选择第一个<li>，您需要：

$('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?

如何使用jQuery在<ul>中找到第一个“可见”<li>？</ul> </li>

6 个答案: