jQuery .eq(x) returns different element in IE than in FF/Chrome

时光怂恿深爱的人放手 提交于 2020-02-01 05:03:10

问题


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?


回答1:


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>


来源:https://stackoverflow.com/questions/2407308/jquery-eqx-returns-different-element-in-ie-than-in-ff-chrome

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!