jquery - индекс элемента клика в списке отличается в IE 7

Question

cms генерирует контент в этом формате.

<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>

Чтобы получить правильный индекс по нажатой ссылке, я должен сделать это в IE 7 (используйте информацию о классе в селекторе)

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

На firefox $("#slide_nav li > a").index(this); работает. В IE это приводит к неправильному индексу (0, 2, 4, 6 ..). Есть ли способ получить правильный индекс в IE 7 для вышеупомянутого HTML без использования информации о классе в селекторе?

Мой второй вопрос

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

не работает. Мне нужно iterate through each $('#slides img') elements, чтобы установить атрибут. Не является ли объект HTMLElement, возвращаемый из $ ('# slides img') [index], объектом jquery?

Answer 1

Чтобы ответить на ваш первый вопрос, я думаю, что проблема связана с неправильным составлением списка. Прямые дети UL должны быть LI, которые должны обернуть все остальное. В вашей разметке привязка происходит перед каждым LI - это может вызывать удушение IE7.

<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>

Чтобы ответить на второй вопрос, вы можете сделать это:

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

или

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

или

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

или

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

Причиной этого является [index] из вашего примера, который эквивалентен .get(index), получает элемент DOM, а не объект jQuery, поэтому .attr() не работает.

В качестве конечной точки, .show() может заменить .attr('style', 'display: block;');, и не забывайте, что вы можете использовать .css() для получения или установки свойств стиля, например, .css("display", "block");