btk*_*btk 4 jquery cross-browser selector
我使用.eq()方法来选择已知元素的特定子元素.IE和Chrome/FF中的元素索引似乎不同,因为.eq(2)根据浏览器返回不同的值.(我正在寻找的元素在FF/Chrome中显示为.eq(2),但在IE中显示为.eq(3)
例如,
alert($(this).parent().children().eq(2).text());
根据浏览器显示不同的结果.
这是有问题的标记:
<div>
<span>
<input onclick="player.search.Groupings($(this).parent().children().eq(2).text(), $(this).parent().children().eq(0).is(':checked'));" type="checkbox"></input>
<span>Fake Initiative A</span><span>1</span>
</span>
<span>
<input onclick="player.search.Groupings($(this).parent().children().eq(2).text(), $(this).parent().children().eq(0).is(':checked'));" type="checkbox"></input>
<span>Initiative B Not Real</span><span>2</span> </span>
</div>
(我删除了属性,内联css等 - 如果没有这些属性就会发生同样的事情).
有没有更好的方法呢？
我想这是与空文本节点做,Firefox将不能注册白之间说的<SPAN>和<input>标记的空间,在那里为IE会,所以对于FF第二个节点将被打开<input> tag(<span> <input>),因为它将是文本节点(<span> -empty text node- <input>).
编辑:
经过一些测试(以前的答案只是我遇到的一个常见问题所以假设它可能对你来说是一样的),问题是IE将你的结束标签作为dom中的一个元素.
如果您将代码更改为缩短结束标记,即:
<div>
<span>
<input type="checkbox" />
<span>Fake Initiative A</span><span>1</span>
</span>
<span>
<input type="checkbox" />
<span>Initiative B Not Real</span><span>2</span>
</span>
</div>
然后它应该按预期工作.
仅供参考我的整个测试脚本(仅提醒文本):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Title here!</title>
<script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/Javascript">
$(function(){
$("input:checkbox").bind('click', function(){
alert($(this).parent().children().eq(2).text());
});
});
</script>
</head>
<body>
<div>
<span>
<input type="checkbox" />
<span>Fake Initiative A</span><span>1</span>
</span>
<span>
<input type="checkbox" />
<span>Initiative B Not Real</span><span>2</span> </span>
</div>
</body>
</html>