Jquery $('#someID > div').each(function(){..}) not working in IE

Question

i don't face this problem while working on localhost only when I access the page using the ip address of my system this happens and it only happens with IE!! (works on all other browsers)

by the way i'm using Tomcat V6.0.0.29, IE8

I tried debugging the JS code using IE developer tools debugger, ofcourse when I open using http://localhost:8080/ everything works perfectly fine, but when I use http://myIP:8080/ this loop is giving a problem :-

$('#someId > div').each(function(){...}); 

As in this loop doesn't run at all, it just kind of skips it. I have checked the IDs they are fine moreover its working in localhost why should it give a problem when I access it using my IP?

Note :- a. (correction) The problem is only there in IE7, it works perfectly in IE8.

b. As it turns out something weird is happening! i'm using IE8 when i open this webpage using localhost the developer tools shows its working in IE8 standards but when i use the IP address to access this page the developer tools shows its working in IE7 standards. When i changed the standards to IE8 it worked (using the IP address)!

c. But the problem is why the hell is it not working with IE7!! As in everything works except the loop mentioned above.

Answer 1

Finally i came to know what was causing the problem in IE7. Consider the below situation:-

<div id="div1">abc
          <div id="div2">def
                   <div>hjs</div>
                   <div>zyx</div>
          </div>
          <div id="div3">xsj
                   <div>ask</div>
                   <div>iue</div>
          </div>
</div>

The jquery i had written for traversing these divs was something like

$("#divId > div").each(function(){..});

Now for the first level div that is traversing the divs directly inside the div with id "div1" worked perfectly in IE7, but when i did something like:-

$("#div2 > div").each(function(){..});

This worked in all browsers (even in IE8!!) but not in IE7. This is because apparently IE7 requires the exact child selector for divs. So for IE7 something like this needs to be written:-

$("#div1 > #div2 > div").each(function(){..});

for traversing the divs inside the div with id "div2"

So the problem was cause just by my lack of knowledge about IE7!! sorry n thanks guys!

Answer 2

The culprit being IE it could turn out something as evil as the browser not caching the page when loaded from localhost, but reading it from cache when using the ip. Make sure you load the page to empty cache from your ip.

Answer 3

This may due to the group policy of your company for forcing Intranet sites using a specific version of IE in compatibility mode. I experienced exactly the same issue when I introducing some IE10+ Javascript libraries to my page.

To work around this you can either ask your company IT for changing the policy or force the browser to not using a compatibility view with the following tag.

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

More details for this tag can be found with the topic below.

StackOverflow - Force IE compatibility mode off using tags

Answer 4

Check to see if your script is loaded when using your IP address. Sometimes browsers don't load scripts on special situations (for example when you want to load a script from an http source into an https page). Also you should check IE's security configuration.
To check whether your script is loaded and executed or not, simply put an alert('loaded') statement at the beginning of your code.