omixam omixam - 6 months ago 25
CSS Question

How to get index of current element taking into account only visible elements?

I'm using jQuery to create simple portfolio and show view light box with next before options.

When the user clicked some project I need get the index of the project but taking into account only visible elements.

After click I take

$(this).parents("li").filter(":visible").index();


But count hidden elements.

How can I get the index only count visible elements?

Answer

I found similar question

Using jQuery to select items that have style "visibility:visible" or "visibility:hidden" NOT "display: none"

var projectIndex = $("#grid li").filter(function() {
            return !($(this).css('visibility') == 'hidden' || $(this).css('display') == 'none');
        }).index(item) + 1;

item is variable that hold clicked element.

I hope that be useful for someone.