Tutorial :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?


Solution:1

Give this a try

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


Solution: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


Solution: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...


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »