jquery $ function returning different results in IE

Question

$('.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 produces an alert box saying the following:

17 Conflicting Controls
Monday Parent

The exact same page run in IE 6 or 7 produces an alert box saying the following:

45 Conflicting Controls
Monday Parent

Firefox is right, there are only 17 conflicting controls. The 45 that IE is identifying are controls that are not a descendant of "Monday". If I've specified "Monday" as the context for the $() function, why is IE returning controls outside of it?

Answer 1

Give this a try

var controls = $(this).parents('.Schedule').children('.Morning input, .MorningPart input, .Afternoon input, .AfternoonPart input')

Answer 2

I modified your example a bit because my structure is a little different

$(this).parents('.RadioSchedule').children('.Morning, .MorningPart, .Afternoon, .AfternoonPart').find('input');

this worked produced the same results across IE and Firefox

Answer 3

<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');

is returning incrementally more results as it gets executed. So when it's executed the first time for MondayFullDay it returns 1 result, but once it gets to TuesdayFullDay it returns 2 results. This is only in IE.

Because the above xhtml structure is not optional for this application, I ended up just manually traversing the DOM through successive calls to .parent().

Changing this

$(this).parents('.Schedule');

Into this

$(this).parent().parent().parent();

I'm still convinced that the parents() method is not working as documented though...