Jquery - index of click element in list is different from IE 7
cms creates 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 the correct index of the clicked link I have to do it in IE 7 (use the class information in the selector)
$("#slide_nav li a").click(function(){
var index = $("#slide_nav li > a.ohlord").index(this);
});
It $("#slide_nav li > a").index(this);
works in firefox . In IE, this results in an invalid index (0, 2, 4, 6 ..). Is there a way to get the correct index in IE 7 for the above html without using the class information in the selector?
My second question:
$('#slides img')[index].attr('style', 'display: block;');
does not work. I need to iterate through each $('#slides img') elements
set an attribute. Isn't the HTMLElement object returned from the $ ('# slides img') [index] jquery object?
a source to share
To answer your first question, I think the problem is with a poorly formed list. The straight children of the UL should be LIs that should wrap everything else. There is an anchor in front of each LI in your markup, which can make IE7 gasp.
<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 this is [index]
from your example, which is equivalent .get(index)
, gets a DOM element, not a jQuery object, so .attr()
doesn't work.
As an endpoint .show()
can replace .attr('style', 'display: block;');
and don't forget what you can use .css()
to get or set style properties, for example.css("display", "block");
a source to share