I'm trying to select a <div> inside of a <p> by name, but it's returning 0 results. The same type of selection works fine for <input> and <span>, but not for <select> and <div>. The code below demonstrates what I mean:
<html>
<head>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
</head>
<body>
<p id="foo">
<input type="text" name="tl-label" />
<select name="tl_type">
<option value="select_type">Select type</option>
<option value="field">Field</option>
<option value="text">Text label</option>
<option value="flag_set">Flag set</option>
</select>
<span name="manip-links">
<a name="move_up" href="#">[move up]</a>
<a name="move_down" href="#">[move down]</a>
<a name="delete" href="#">[delete]</a>
</span>
<div name="field-params">
field params
</div>
<div name="text-params">
text params
</div>
<div name="flag-set-params">
flag set params
</div>
</p>
</body>
<script type="text/javascript" language="JavaScript">
<!--
var foo = $('#foo');
foo.tl_label = foo.find('input[name=tl-label]');
foo.tl_type = foo.find('select[name=tl-type]');
foo.manip_links = foo.find('span[name=manip-links]');
foo.field_params = foo.find('div[name=field-params]');
foo.text_params = foo.find('div[name=text-params]');
foo.flag_set_params = foo.find('div[name=flag-set-params]');
$('body').append('<p>' +
'tl_label: ' + foo.tl_label.size() + '<br/>' +
'tl_type: ' + foo.tl_type.size() + '<br/>' +
'manip_links: ' + foo.manip_links.size() + '<br/>' +
'field_params: ' + foo.field_params.size() + '<br/>' +
'text_params: ' + foo.text_params.size() + '<br/>' +
'flag_set_params: ' + foo.flag_set_params.size() + '<br/>' +
'</p>');
//-->
</script>
</html>
The traces appended at the bottom read (in Firefox 3.5.6):
tl_label: 1
tl_type: 0
manip_links: 1
field_params: 0
text_params: 0
flag_set_params: 0
They should all read 1. What am I missing?