jQuery .eq（x）在IE中返回与在FF / Chrome中不同的元素 [英] jQuery .eq(x) returns different element in IE than in FF/Chrome
问题描述
我使用.eq（）方法来选择已知元素的特定子元素。看起来元素索引在IE和Chrome / FF中是不同的，因为.eq（2）根据浏览器返回不同的值。 （我正在寻找的元素在FF / Chrome中显示为.eq（2），但在IE中显示为.eq（3））
p>
alert（$（this）.parent（）。children（）。eq（2）.text
根据浏览器显示不同的结果。
以下是有问题的标记：
< div&
< span>
< input onclick =player.search.Groupings（$（this）.parent（）。children（）。eq（2）.text（），$（this）.parent .eq（0）.is（'：checked'））; type =checkbox>< / input>
< span>假冒计划A< / span>< span> 1< / span>
< / span>
< span>
< input onclick =player.search.Groupings（$（this）.parent（）。children（）。eq（2）.text（），$（this）.parent .eq（0）.is（'：checked'））; type =checkbox>< / input>
< span> Initiative B Not Real< / span>< span> 2< / span> < / span>
< / div>
（我删除了属性，内联css等 - 同样的事情发生没有那些地方） / p>
有更好的方法吗？
我应该认为它是与空的文本节点，Firefox将不会注册之间的白色空间说，< span>和< input>标签之间，其中IE将，因此对于FF第二个节点将是< input>标签（< span>< input>）其中它将是文本节点（< span> -empty text node-< input&
$ b
编辑：
经过一些测试（上一个答案只是一个常见的问题，我猜测它可能是一样的），问题是IE在dom中选择你的结束标签作为元素。
如果你把代码改成短结束标签，例如：
< div>
< span>
< input type =checkbox/>
< span> Fake Initiative A< / span>< span> 1< / span>
< / span>
< span>
< input type =checkbox/>
< span>计划B不实际< / span>< span> 2< / span>
< / span>
< / div>
只是为了引用我的整个测试脚本（只提醒文本）：$ p>
<
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 3.2 Final // EN>
< html>
< head>
< title>标题here！< / title>
< script type =text / Javascriptsrc =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 ）;
}）;
}）;
< / script>
< / head>
< body>
< div>
< span>
< input type =checkbox/>
< span>假动作A< / span>< span> 1< / span>
< / span>
< span>
< input type =checkbox/>
< / span>< / span>
< / body>
< / html>
I am using the .eq() method to select a specific child element of a known element. It appears that the element indices are different in IE and in Chrome/FF, as .eq(2) returns different values depending on browser. (The element I'm looking for shows up as .eq(2) in FF/Chrome, but .eq(3) in IE)
For example,
alert($(this).parent().children().eq(2).text());shows different results depending on the browser.
Here's the markup in question:
<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>(I stripped out attributes, inline css etc -- same thing happens without those in place).
Is there a better way of doing this?
解决方案
I should think it is to do with empty text nodes, Firefox will not register the white space between say, the <span> and the <input> tag, where as IE will, so for FF the second node will be the <input> tag (<span><input>) where as it it will be the text node (<span>-empty text node-<input>).EDIT:
After some testing (Previous answer was just a common problem I run into so presumed it may have been the same for you), The problem is that IE picks up your closing tag as an element in the dom.
If you change your code to short closing tags, ie:
<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>Then it should work as predicted.
Just for reference my whole test script (only alerting the text):
<!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>
这篇关于jQuery .eq（x）在IE中返回与在FF / Chrome中不同的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
