Jquery $ function returns different results in IE
$('.Schedule .Full input').each(function(i)
{
var controls = $('.Morning input, .MorningPart input, .Afternoon input, .AfternoonPart input', $(this).parents('.Schedule'));
alert(controls.length + " Conflicting Controls\n"+
$(this).parents('.Schedule').attr('id') + " Parent");
});
When I run this code in Firefox, the first execution of this function creates an alert box with the following content:
17 Conflicting
Monday parent controls
The exact same page launched in IE 6 or 7 generates an alert box that says this:
45 Conflicting
Monday parent controls
Firefox is right, there are only 17 conflicting controls. 45 that IE identifies are controls that are not descendants of Monday. If I set "Monday" as the context for the $ () function, why does IE return controls outside of it?
a source to share
<div id="Monday" class="Schedule">
<div class="Full">
<div>
<input type="radio" name="MondayFullDay" checked="checked" value="none"/>None
</div>
</div>
</div>
<div id="Tuesday" class="Schedule">
<div class="Full">
<div>
<input type="radio" name="TuesdayFullDay" checked="checked" value="none"/>None
</div>
</div>
</div>
Okay, here's another tricky part ... Looks like
$(this).parents('.Schedule');
returns step-by-step results as they run. So when it is executed the first time for MondayFullDay it returns 1 result, but as soon as it gets to TuesdayFullDay it returns 2 results. This is IE only.
Since the above xhtml structure is not optional for this application, I ended up just manually moving the DOM through successive calls to .parent ().
Changing this
$(this).parents('.Schedule');
In that
$(this).parent().parent().parent();
I'm still convinced that the parents () method doesn't work as documented, though ...
a source to share