First jQuery script, simple Form Focus, any problems?

Question

After studying the docs for a while, I came up with my first jQuery script. It's a simple Form Focus script. Just want to make sure I've got this right.

I couldn't find anything that spoke of "conditional statements" with jQuery, so I assume you just use standard JavaScript if / else if statments.

To test if the #id exists, the jQuery docs explained I should use .length.

$(document).ready( function() {
    if ($('#one').length) {
     $('#one').focus();
    }
    else if ($('#two').length ) {
     $('#two').focus();
    }
    else {
     return false; // is this even necessary?
    }
});

EDIT:

It is possible that #one and #two will exist on the same page, so I want to target #one first.

Answer 1

Your script is accurate, although there's no need, as you anticipated, to return anything in your else clause (or even to have one)

Answer 2

Depending on how your interface is displayed... for example, will elements one and two exist at the same time, if not, you can do:

$(document).ready( function() {
  $('#one').focus();
  $('#two').focus();
}

If they will exist together on the same page, then this is fine:

$(document).ready( function() {
  if ($('#one').length) {
    $('#one').focus();
  }
  else {
    $('#two').focus();
  }
}

If no elements were returned, the .focus() won't actually fail or anything, so you're free to just do it in 1 line without the conditional.

Also, the return false bit isn't necessary.

Answer 3

you don't need to test length. if the wrapped set is empty the focus function is called for nothing. if only #one or #two will exist, then the following works fine:

$(function() {  // shorthand for $(document).ready()
       $('#one, #two').focus();
});

Answer 4

What you did is functionally correct. As you advance with jQuery though, you will not want to do multiple lookups. This would be a better way of writing it:

$(document).ready( function() {
    var $one = $("#one"), $two = $("#two");
    if ( $one.length ) $one.focus();
    else if ( $two.length ) $two.focus();
});

Every time you use $("#id") it performs a lookup. If you can cache it in a variable the first time like var $one = $("#one") you can save times on lookups later. The $ sign in my variable names is completely arbitrary, but it helps you remember which variables have jQuery wrapped objects.

Answer 5

Your logic is generally correct, although when using jQuery you can really cut the amount of cheks & detections you'd need with standard Javascript

• Calling a method or property on the jQuery object will not return an error even if the object (e.g $("#one") ) was not found

• You can fetch multiple DOM Elements at once (e.g $("#one,#two") ) and you can also call a method on all of these objects at once `

• There's no need to return anything at the end of your $(document).load(function(){...})

So having all these points in ming you can update your script like so:

$(document).ready(function() {
  $('#one,#two').focus();
});

EDIT:

Since you indicated you want to select #one first, in the case when both #one and #two exist on the same page, all you have to do is put the #one reference at the end of the list and it will be the one that always gets selected if it exists.

$('#two,#one').focus();