IE JavaScript Mystery

I have the following JavaScript function

function headerBanner(){
    var current = $('.bannerImages img:nth-child('+bannerIndex+')').css('display', 'none');
    if(bannerIndex== $('.bannerImages img').size()){
        bannerIndex= 1;
    }else{
        bannerIndex= (bannerIndex*1)+1;
    }
    var next =  $('.bannerImages img:nth-child('+bannerIndex+')').css('display', 'block');
}

In every browser on the planet, with the exception of IE (8, 7 or less), the above code is working correctly. In Internet Explorer it's going through it and having no effect. I've put alerts at every line of the function and they all fire, even in IE, but the banner simply doesn't change. Is there any reason as to why this is so?

The HTML attached for this function is the following:

<div class='bannerImages'>
    <img src="FirstImage.jpg" />
    <img src="SecondImage.jpg" />
    <img src="ThirdImage.jpg" />
</div>
开发者_开发百科

---

try this:

DEMO: http://jsbin.com/ipudo/4

$(function(){
    $('.bannerImages img:gt(0)').hide();
    setInterval(function(){
      $('.bannerImages :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.bannerImages');}, 
      3000);
});​

---

Try using the script debugger in the IE8 developer tools and put some breakpoints in to check the value of bannerIndex. If it's possible that it's not a number you may want to use parseInt() to convert it to a number and IsNaN() to ensure that it is, rather than relying on arithmetic operations to normalize it for you.

---

One thing I found with hide() and show() was that, sometimes, if you set the display to none, show() will not work. So, I always create the element then call a hide(0) on it first thing when document is ready.

Also, did you check the length of $('.bannerImages img:nth-child('+bannerIndex+')') to make sure it's not 0?

Last thing, $('.bannerImages img').size() isn't 1, right? It would make sense if $('.bannerImages img').size() is 1 and bannerIndex is 1, then it will not change anything when it go through your headerBanner();

ps: I'm sure you won't make some simple mistake such as bannerIndex was started from 0 instead of 1...

Oh, btw, there is a firebug for IE, which u need to include a script in your header