2

I can't do $('ul li:first') or $('ul li:eq(0)') because they select the first item which is not necessarily the first visible item.

I'm using the jCarousel Lite plugin:

It works by moving the ul left by giving it negative margin every time next is clicked and moving it right when prev is clicked.

I want to give the first visible list item a red border color. The plugin doesn't add anything to the markup for the first visible item in the list so how can I target it?

P.S. $('ul li:visible').is(':first') won't work either because the plugin doesn't actually give the non visible lis any display none property.

Kyle
  • 35
  • 1
  • 3
  • Now, are you trying to target the *currently* visible item, or the first item that *could be* visible? – Ryan Kinal Sep 15 '11 at 17:39
  • Use a debugger to see if your list elements are being modified or wrapped by the plugin. This might cause the selector to fail. – Blazemonger Sep 15 '11 at 17:47
  • Just curious, why would you want to border the first visible item? Is that for a visual feedback for the user to indicate a selected item? What if the user had selected the third visible item, then clicked the next button? I'd expect the border will stay i.e. not necessarily moved to the first one. – moey Sep 15 '11 at 17:55

6 Answers6

1

Something a little fiddly. This works out the left offset applied to the jCarousel, divides it by the width of the li items inside to work out how many lis are left of this one, and then converts that into an :eq() inside.

var firstVisibleListItem = 0 - (parseInt($('.jCarouselLite ul').css('left')) / parseInt($('.jCarouselLite ul li').css('width'))) + 1
$('.jCarouselLite ul li').filter(':eq(' + firstVisibleListItem + ')').hide();
Joe
  • 15,669
  • 4
  • 48
  • 83
  • Perhaps not the best for jcarousel, and the highly compressed expression offends me ;-) but +1 for being the only (non jcarosel-specific answer) to actually answer the question. It does have a few caveats though: might be slightly better to walk through the li's adding the widths. –  Sep 15 '11 at 18:01
  • @pst If you like I can maxify it, and make it take up a 14mb file :D – Joe Sep 15 '11 at 18:02
  • I would expect nothing less >:) –  Sep 15 '11 at 18:04
1

From: http://www.gmarwaha.com/jquery/jcarousellite/#doc you can use the afterEnd callback function:

afterEnd - Callback function that should be invoked after the animation ends. The elements representing the items that are visible after the animation ends are passed in as argument.

$(".carousel").jCarouselLite({
    btnNext: ".next",
    btnPrev: ".prev",
    afterEnd: function(a) {
       $(a[0]).addClass("redBorder");
   }
});
bstakes
  • 1,898
  • 14
  • 12
  • Thank you! I was playing around with that callback but didn't know a[0] would target the first li. Thanks again. – Kyle Sep 15 '11 at 18:26
0

To select the first <li>, you'd do:

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

Would you be able to figure out the first visible item (assuming you know how many items are visible at the same time) when the page is initially loaded? If yes, then you might be able to keep track by monitoring the prev / next button is clicked (e.g. when next is clicked, you'd increment your calculated position).

moey
  • 10,587
  • 25
  • 68
  • 112
  • Nope. (Original) title and post had different aims -- the first visible child keeps changing. –  Sep 15 '11 at 17:58
0

Try this one :) $('ul li:first-child') I always use it.

simoncereska
  • 3,035
  • 17
  • 24
  • Nope. (Original) title and post had different aims -- the first "visible" child keeps changing. –  Sep 15 '11 at 17:58
  • 1
    didn't notice that you are looking for a first visible. here is working example http://jsfiddle.net/simoncereska/Aw493/1/ – simoncereska Sep 15 '11 at 18:12
0

I give the first item a red border color from CSS.

.jCarouselLite ul li:first-child{
    border: 1px solid red;
}
Thein Hla Maw
  • 685
  • 1
  • 9
  • 28
  • Nope. (Original) title and post had different aims. The first visible child keeps changing -- it's not always the first child. –  Sep 15 '11 at 17:59
  • Yes. It depends on Plugin Options( **start** You can specify from which item the carousel should start. Remember, the first item in the carousel has a start of 0, and so on). http://www.gmarwaha.com/jquery/jcarousellite/?#doc – Thein Hla Maw Sep 15 '11 at 18:04
-2

Try this:

$('ul li').first(); // ta da?
Naftali
  • 144,921
  • 39
  • 244
  • 303