jQuery selector not working in IE

I've written a basic script in jQuery (probably quite an ugly one for you seasoned jQuery vets) but it works great in Firefox etc (as usual) and then I switched to IE where it isn't working.

I have tried many different avenues, but from what I can see is that IE can't grab the element I'm asking for - I'll highlight this problematic line.

// Hide all panels.
$("div.testimonial-panel").hide();

// Set the current slide as the first index
var curTest = 0;

// Show the slide with the index of curTest (this changes later)
$("div#testimonial-"+curTest).show();

// On click of any LI
$("ul#testimonial-list li").click(function () {

    // If it's not the current index of curTest.
    // This is to make sure nothing happens when you click the one already selected.
    if($(this).index() != curTest) {

        // Remove the current class off of every item to be safe, then add to current index.
        $(this).siblings().removeClass("current");
        $(this).addClass("current");

        // Then newCurTest should equal the new index set by the click of the LI.
        var newCurTest = $(this).index();

                    // AT THIS POINT HERE, IE SEEMS TO NOT TAKE AFFECT. THE DYNAMIC SELECTOR DOESN'T WORK FOR IE EVEN THOUGH IT RETURNS AN 'Object'
        $("div#testimonial-"+curTest).hide();
        $("div#testimonial-"+newCurTest).show();
        curTest = newCurTest;


    }

});

Here is a sample of the HTML I am working with:

<div class="testimonials">

<div class="testimonial-panel" id="testimonial-0">
    <h2>"Slide One"</h2>
    <p><strong>Stewart Arbuckle<br /> Surveyor<br /> Jones Lang Lasalle</strong></p>
    <blockquote>
        <p>"The transparency that the company provides is apparent through the number of leads we recieve on a daily basis, making it a vital marketing tool for any commercial property professional."</p>
    </blockquote>
</div>

<div class="testimonial-panel" id="testimonial-1">
    <h2>"Slide Two"</h2>
    <p><strong>Stewart Arbuckle<br /> Surveyor<br /> Jones Lang Lasalle</strong></p>
    <blockquote>
        <p>"The transparency that the company provides is apparent through the number of leads we recieve on a daily basis, making it a vital marketing tool for any commercial property professional."</p>
    </blockquote>
</div>

<div class="testimonial-panel" id="testimonial-2">
    <h2>"Slide Three"</h2>
    <p><strong>Stewart Arbuckle<br /> Surveyor<br /> Jones Lang Lasalle</strong></p>
    <blockquote>
        <p>"The transparency that the company provides is apparent through the number of leads we recieve on a daily basis, making it a vital marketing tool for any commercial property professional."</p>
    </blockquote>
</div>

<div class="testimonial-panel" id="testimonial-3">
    <h2>"Slide Four"</h2>
    <p><strong>Stewart Arbuckle<br /> Surveyor<br /> Jones Lang Lasalle</strong></p>
    <blockquote>
        <p>"The transparency that the company provides is apparent through the number of leads we recieve on a daily basis, making it a vital marketing tool for any commercial property professional."</p>
    </blockquote>
</div>

<div class="testimonial-panel" id="testimonial-4">
    <h2>"Slide Five"</h2>
    <p><strong>Stewart Arbuckle<br /> Surveyor<br /> Jones Lang Lasalle</strong></p>
    <blockquote>
        <p>"The transparency that the company provides is apparent through the number of leads we recieve on a daily basis, making it a vital marketing tool for any commercial property professional."</p>
    </blockquote>
</div>

<div class="testimonial-panel" id="testimonial-5">
    <h2>"Slide Six"</h2>
    <p><strong>Stewart Arbuckle<br /> Surveyor<br /> Jones Lang Lasalle</strong></p>
    <blockquote>
        <p>"The transparency that the company provides is apparent through the number of leads we recieve on a daily basis, making it a vital marketing tool for any commercial property professional."</p>
    </blockquote>
</div>

<div class="testimonial-panel" id="testimonial-6">
    <h2>"Slide Seven"</h2>
    <p><strong>Stewart Arbuckle<br /> Surveyor<br /> Jones Lang Lasalle</strong></p>
    <blockquote>
        <p>"The transparency that the company provides is apparent through the number of leads we recieve on a daily basis, making it a vital marketing tool for any commercial property professional."</p>
    </blockquote>
</div>

<div class="testimonial-panel" id="testimonial-7">
    &l开发者_Python百科t;h2>"Slide Eight"</h2>
    <p><strong>Stewart Arbuckle<br /> Surveyor<br /> Jones Lang Lasalle</strong></p>
    <blockquote>
        <p>"The transparency that the company provides is apparent through the number of leads we recieve on a daily basis, making it a vital marketing tool for any commercial property professional."</p>
    </blockquote>
</div>

<ul id="testimonial-list">
    <li class="current"><img src="graphics/testimonial-bw.jpg" width="90" height="55" alt="" /></li>
    <li><img src="graphics/testimonial-cbre.jpg" width="90" height="55" alt="" /></li>
    <li><img src="graphics/testimonial-jll.jpg" width="90" height="55" alt="" /></li>
    <li><img src="graphics/testimonial-canon.jpg" width="90" height="55" alt="" /></li>
    <li><img src="graphics/testimonial-tlg.jpg" width="90" height="55" alt="" /></li>
    <li><img src="graphics/testimonial-oxford.jpg" width="90" height="55" alt="" /></li>
    <li><img src="graphics/testimonial-rapleys.jpg" width="90" height="55" alt="" /></li>
    <li><img src="graphics/testimonial-nsc.jpg" width="90" height="55" alt="" /></li>
</ul>

As you might be able to see, the DIV's have a dynamically built number appended to the ID.

I dynamically grab this with jQuery based on the LI's current index.

Once again, this all works fine in Firefox so I'm not sure if my code is strictly in the wrong.

Any help would be greatly appreciated. I've been searching everywhere and trying for hours to get this to work. IE doesn't seem to want to pick the elements up to hide/show.

Many thanks, Michael.

This may be a problem with string concatenation in JavaScript - the + operator is not only used for addition, but for concatenating strings.... I know, not very nice.

IE might think you mean you want to add the value of curTest to the string's value, rather than append the chatacter-equivalent to the end of the string.

To test, build the string outside of the selector and use a javascript debugger to see what value is interpreted (like this)

var testString = "div#testimonial-" + curTest;
$(testString).hide();

You may want to use JavaScript's toString() method to force concatenation on your two variables.

I think there is a cleaner way to do it. How about this:

$('li').click(function(){
   var i = $('li').index(this);
    $('.testimonial-panel').not(':eq('+i+')').hide();
   $('.testimonial-panel').eq(i).show(); 
});

Check it out here.

Note that I put display:block as an inline style, so that it wouldn't flicker at all as the page was loading; i.e. show the unwanted sections. You could also put .testimonial-panel:nth-child(0) {display:block}. This works in IE8; hope that's all you were looking for.