I have a subpar understanding of Javascript and JQuery, but something
I came across the other day seems counterintuitive to me and I can't
find an answer. I've been working on an autocomplete search with drop
down--most of it is based on Chapter 8 of Learning JQuery.
In this search, pressing enter when an item is highlighted redirects
to a new page. The code from the book reads similar to the following:
var redirectPage = function() {
var x = $autocomplete.find('li').eq(selectedItem).children()[0];
location.href = x;
};
where, from earlier:
var $autocomplete = $('<ol id="dropbox"></ol>').hide().insertAfter($
('<some search field>'));
"selectedItem" is the currently highlighted list element (<li>) in the
drop down div. Its my understanding, then, that the redirectPage
function should find the list item that is currently highlighted, and
then find its first child. This first child is a link containing text
(a la <a href="google.com">Google</a>).
To me, it seems that .children()[0] should return the entire string:
"<a href="google.com">Google</a>"
However, it only returns "google.com".
Further, when I change var x =
$autocomplete.find('li').eq(selectedItem).children().html() it does
return the HTML inside the anchor, namely "Google".
Why is this? I'm probably missing something regarding how JQuery
handles objects or something, but an explanation would be nice.
Thank you in advance!
Scott Hulbert
