[jQuery] get index number of 'in focus' text box

[jQuery] get index number of 'in focus' text box


As each text box gains the focus, I would like the index number of
that text box to be displayed in a div.
I tried to use the following but -1 was displayed each time.
$(document).ready(function() {
$('input:text').focus(function () {
$('div').text( $(this).index());
});
});
Here is the full HTML markup and jQuery code. TIA
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<script type = "text/javascript" src="jquery.js"></script>
<script type = "text/javascript">
$(document).ready(function() {
$('input:text').focus(function () {
$('div').text($(this).index());
});
});
</script>
</head>
<body>
<form>
<input type='text'>
<input type='text'>
<input type='text'>
</form>
<div>index number to be displayed here</div>
</body>
</html>