CODEWITHSUNDEEP
jqueryjquery-selectorsvisible
jq beginner
jq beginner

Reputation: 1070

JQuery visible selector does not return the correct index

i have this simple code http://jsfiddle.net/U4Fj9/ the index of the visible image is always 3 which is the last image while the visible image is the first one i know it's very simple but can't see anything wrong with my code any help ?

Upvotes: 1

Views: 274

Answers (2)

samn
samn

Reputation: 2807

Try this:

$(document).ready(function() {
$(".show img").css("display","none");
$(".show img:first").css("display","block");
var curImg=$('.show img:visible');
var i= $("img").index(curImg);
$(".curindex").html(i);
});

Upvotes: 1

fyr
fyr

Reputation: 20869

See http://api.jquery.com/visible-selector/

Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout. During animations that hide an element, the element is considered to be visible until the end of the animation. During animations to show an element, the element is considered to be visible at the start at the animation.

This method e.g. as replacment of your original one solves your problem:

$(document).ready(function() {
   $(".show img").css("display","none");
   $(".show img:first").css("display","inline");
   var curImg = $(".show img").filter(":visible").index();
   $(".curindex").html(curImg );
});

Upvotes: 1

Related Questions