jquery - 列表上的click元素索引在IE 7上是不同的

时间:2010-05-17 17:34:01

标签: jquery jquery-selectors

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);
}); 

on 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来设置属性。是不是从$('#slides img')[index]返回了一个jquery对象的HTMLElement对象?

1 个答案:

答案 0 :(得分:2)

要回答你的第一个问题,我认为问题与列表形成不良有关。 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");