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

Solution 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));
});

Solution 2

Both length and size() will work to give you a count of the number of elements in a jquery object.

http://jsfiddle.net/KeKPb/

I find that length is used more often as there is no need for the overhead of the size() call when all it does is use length internally anyway.

You'll need to define what "not working" means because both methods are perfectly valid.

Comments

[James Montagne]

There's no reason to loop and put them in an array. You can simply use eq to get a certain element out of the jquery object or use the jquery object itself as an array. $("#container ul li")[2] You could also use api.jquery.com/get to get an array if needed.

[Jules]

I'm just giving possible solutions, which might be useful depending on his implementation. Anyway, the eq method is explained in my answer as well.