Response title
This is preview!
Hello,
I've been reading "Learning JQuery, 4th Ed" and I think that an exercise on Chapter 6 may have led me to a bug in the .find() function.
I am attaching the pertinent files to this post. Here is the setup. There is an index.html file that has some clickable letters on the left-hand column. The whole chapter was about Ajax, so clicking on the letters loads in dictionary entries using a variety of Ajax methodologies.
One of the exercises asked to create a tooltip that displayed entries begging with the letter the mouse was hovering over. Those entries are in the file "exercises.html". Since they are wrapped using a div.letter, my first instinct was to create a parent div whose children were the various div.letter. That way I could then search for the appropriate terms based on the letter the cursor was hover over:
var $exerTerms = $('<div id="exerTerms"></div>');
$.get('exercises.html', function(data) {
$(data).find('div.letter').each(function(index, el) {
$exerTerms.append(el);
});
console.log($exerTerms);
});
After lots and lots of tries, I was not able to pick up anything. This seemed strange because I had gotten other examples that were similar to work. After trying many more things I came up with file "exercise2.html". The only difference between the two is that "exercises.html" does not have a container div and "exercise2.html" does. Voila! now the above code worked!
I'm a newbie and I could be doing something wrong. However, after having fiddled with these files for so long I came away relatively convinced that the .find() function is not able to peer into the structure inside the 'body' tag if there is no container div.
To shed more light on this issue, when I run:
$.get('exercises.html', function(data) {
console.log($(data).find('div.letter'));
});
I get an object of zero length. However, when I run it using "exercises2.html", I get an object of length 8.
Any thoughts?
Thank you all in advance.
1
