How should I use/count jQuery .find()

Question

I am using a jQuery plugin I found here: http://tutorialzine.com/2011/03/photography-portfolio-shutter-effect/ except I have changed it a bit.

It still works perfectly in the way it is supposed to, but I have added a next button in which the user cna use to skip to the next image, and it then pauses the interval for one loop so as not to changeonto the next picture too quickly.

However, my problem lies in a prvious button. I am not sure how to do it, so I have added a variable

var positionInt

which is the position of the last list item so I know where I am in the list.

How do I use this along with the li object created by this line:

var container = $('#container'),
    li = container.find('li');

to open the correct li item?

Also, how can I find the length of the li object? I have tried li.size(), li.count() and li.length and none worked.

Or is there a way using just the .find() method to open the li item before the currently visible one? This is how it does it originally to go forward:

li.filter(':visible:first').hide(); // Hid the only visible li
if(li.filter(':visible').length == 0){
li.show(); // if nothing is visible load a li (Im not really sure what this is pointing at, but it loads the next li)
}

Cheers

Answer 1

You can get the number of li's like:

var nr_li = $("#container ul li").length;

If you know the current index of the currently used <li> you can get the previous one by doing:

$prev_li = $("#container ul li:eq(" + (index-1) + ")");

Do make sure though that you do some calculations and checks on that index-1 to make sure you don't go out of bounds and try reaching an unexisting element.

Another thing you could do is cycle through the <li>'s and add each of them into an array for instance. You can then just pull the previous one out of your array.

var array_li = new Array();

$('#container li').each(function() {
   array_li.push($(this));
});