JQuery element index in array

arraysjquery

I have several images loaded into the DOM via jQuery. Each image has 'display: none' aside from one which is 'display: block'. It's this image which I need to find the index of once selecting the img array from the DOM.

The trouble is, img[style="display: block"] doesn't seem to be working as 'display' isn't the only style set on the element. There's top, left, etc…

How can I find the index of the image with display:block from a selection of images with display:none?

Current code I'm using:

slideshowStart = jQuery('.gallery .slideshow img[style="display: block"]').index(this);

Best Answer

You can use the :visible selector for this:

var slideshowStart = $(".gallery .slideshow img:visible").index(this);

Related Solutions

Java – Create ArrayList from array

new ArrayList<>(Arrays.asList(array));

Javascript – How to check if an element is hidden in jQuery

Since the question refers to a single element, this code might be more suitable:

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

It is the same as twernt's suggestion, but applied to a single element; and it matches the algorithm recommended in the jQuery FAQ.

We use jQuery's is() to check the selected element with another element, selector or any jQuery object. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match, otherwise return false.

Best Answer

Related Solutions

Java – Create ArrayList from array

Javascript – How to check if an element is hidden in jQuery

Related Topic