Check if list element is visible (jquery.visible)

Question

I'm trying to check if each element of an ul list is visible using the jquery.visible plugin. The problem is that the script does not handle each "li" element as independent, so putting this:

var element = $("ul li");

if (element.visible(true)) {
    element.removeClass("hidden");
}

Removes the "hidden" class of all elements at the same time.

Any ideas?

Answer 1

You are initializing element as an array, so the name is misleading, and it may be throwing you off later in the code.

You want something like this (untested):

var arrElements = $("ul li");

arrElements.each(function() {
    if ($(this).visible(true)) {
        $(this).removeClass("hidden");
    }
});

Note that I am using the each method and $(this) to act on only one li element at a time.