All geek questions in one place

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

I use the .eq () method to select a specific child of a known item. It seems that element indices are different in IE and in Chrome / FF, since .eq (2) returns different values ​​depending on the browser. (The item I'm looking for appears as .eq (2) in FF / Chrome, but .eq (3) in IE)

For instance,

alert($(this).parent().children().eq(2).text());

shows different results depending on the browser.

Here's the markup:

 <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 removed the attributes, inline css, etc. - the same thing happens without them).

Is there a better way to do this?

+4
source share
1 answer

I should think that this should be done with empty text nodes, Firefox will not register a space between the words "<span> tag and input tag", where IE will be, so for FF the second node will be the <input> (<span> <input tag >), where it will be the text node (<span> - empty text node - <input>).

EDIT:

After some testing (the previous answer was just a normal problem that I ran into, so I suggested that this might be the same for you). The problem is that IE takes your closing tag as an element in dom.

If you change the code to short circuit tags, that is:

  <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 entire test script (for text alert only):

  <! 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>
+7
source

Source: https://habr.com/ru/post/1303532/

More articles:


All Articles