jquery - index of click element on the list is different on IE 7

Question

cms is generating content in this format.

<ul id="slide_nav" class="tabs">
<a name="ctn2363_2465" id="ctn2363_2465" class="hidden"></a><li id="button_1"><a class="ohlord" href="javascript: void(0);" id="b1">Bookbag</a></li>
<a name="ctn2363_2466" id="ctn2363_2466" class="hidden"></a><li id="button_2"><a class="ohlord" href="javascript: void(0);" id="b2">help</a></li>
<a name="ctn2363_2467" id="ctn2363_2467" class="hidden"></a><li id="button_3"><a class="ohlord" href="javascript: void(0);" id="b3">Team</a></li>
<a name="ctn2363_2468" id="ctn2363_2468" class="hidden"></a><li id="button_4"><a class="ohlord" href="javascript: void(0);" id="b4">At</a></li>
</ul>

To get a correct index of the clicked link I have to do this in IE 7 (use class info in selector)

$("#slide_nav li a").click(function(){
   var index = $("#slide_nav li > a.ohlord").index(this);
}); 

On firefox $("#slide_nav li > a").index(this); works. On IE this produces incorrect index (0, 2, 4, 6 ..). Is there a way to get the correct index in IE 7 for the above html without using class information in the selector?

My second question is

$('#slides img')[index].attr('style', 'display: block;');

does not work. I have to iterate through each $('#slides img') elements to set the attribute. Isn't HTMLElement object returned from $('#slides img')[index] an jquery object?

Answer 1

To answer your first question, I think the problem is related to the list being badly-formed. The direct children of the UL should be LIs, which should wrap everything else. In your markup, an anchor occurs before each LI - that could be causing IE7 to choke.

<a name="ctn2363_2465" id="ctn2363_2465" class="hidden"></a>**<--this is suspect, restructure**<li id="button_1"><a class="ohlord" href="javascript: void(0);" id="b1">Bookbag</a></li>

To answer your second question, you can do this:

$('#slides img').eq(index).attr('style', 'display: block;');

or:

$('#slides img:eq(' + index + ')').attr('style', 'display: block;');

or:

$('#slides img')[index].style.display = 'block;';

or:

$('#slides img').get(index).style.display = 'block;';

The reason for that is[index] from your example, which is equivalent to .get(index), gets a DOM element, and not a jQuery object, hence .attr() does not work.

As a final point, .show() can substitute for .attr('style', 'display: block;'); and don't forget you can use .css() to get or set style properties, e.g. .css("display", "block");