如何找到第一個“可見” <li> 里面 <ul> 使用jQuery嗎？

Question

我不能執行$('ul li:first')或$('ul li:eq(0)')因為它們選擇的第一個項目不一定是第一個可見的項目。

我正在使用jCarousel Lite插件：

它的工作原理是，每次單擊next時，通過給ul提供負的邊距將ul左移，然后在單擊prev時將其右移。

我想給第一個可見列表項添加紅色邊框顏色。 該插件不會為列表中第一個可見項的標記添加任何內容，那么我該如何定位呢？

PS $('ul li:visible').is(':first')也不起作用，因為該插件實際上並未為不可見lis提供任何顯示none屬性。

Answer 1

有點怪異的東西。 這算出了應用於jCarousel的left偏移量，將其除以li項內部的寬度，算出該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?