Selection bug in Firefox?
I have a simple jQuery script designed to filter a nested <ul> to show
only the items that you want. Everything works fine in IE7, but in
Firefox 2.0.0.14 the script doesn't work.
Here's an example showing the problem.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>status</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-
latest.js"></script>
<script type="text/javascript">
var last_phrase = "";
$(function(){
$("#filter").keyup(function(){
var phrase = this.value;
if (phrase == last_phrase) { return false; }
last_phrase = phrase;
var elems = $('#records li');
elems.each(function(){
//alert(this + this.innerText); var elem = this;
if (elem.innerText.indexOf(phrase)>=0) {
jQuery(elem).show();
} else {
jQuery(elem).hide();
}
});
});
$("#filter-list").submit(function(){
return false;
}).focus();
});
</script>
</head>
<body>
<H1>Records</H1>
<form id="filter-list">Filter: <input name="filter" id="filter"
value="" maxlength="30" size="30" type="text"></form>
<DL id="records">
<ul>
<ul><li STYLE='margin-left:10px;'><strong>item1-1</strong>
<ul><li STYLE='margin-left:10px;'><strong>item1-1-1</strong>
<ul><li STYLE='margin-left:10px;'>abcd
</li></ul>
<ul><li STYLE='margin-left:10px;'>hello
</li></ul>
</li></ul>
</li></ul>
</ul>
<ul>
<ul><li STYLE='margin-left:10px;'><strong>item2-1</strong>
<ul><li STYLE='margin-left:10px;'><strong>item2-1-1</strong>
<ul><li STYLE='margin-left:10px;'>what's up
</li></ul>
</li></ul>
</li></ul>
<ul><li STYLE='margin-left:10px;'><strong>item2-2</strong>
<ul><li STYLE='margin-left:10px;'>goodbye
</li></ul>
<ul><li STYLE='margin-left:10px;'>ciao
</li></ul>
</li></ul>
</ul>
</DL>
</body>
</html>
If you comment the alert back in, you can see that in IE7, you get an
[object] alert for each <li> object with all of the text within that
element. Whereas with Firefox, you only get one alert, for [object
HTMLLIElement] and innerText is undefined.
It looks to me like there is a selection bug when running jQuery on
Firefox. Or, am I doing something wrong? Thanks for your help.
Ted