Getting an empty JQuery object

In the following code I set up a change handler on a select box to show and hide some follow up questions based on the value of the selection.

Further, for some values of the selection there is an extra message that is displayed.

In order to check to see if I need to hide the extra message, I keep a variable called Previous. Upon execution of the handler I check to see if Previous is null or if the size is 0.

It would be nice to initialize Previous to an empty JQuery object so as not to have to do the extra check for null.

Doing a $() returns an object with the size of 1.

Is there a way to create an empty Jquery object?

//Init function.
$(function(){
//Hold the previously selected object for the account type selection.

var Previous = null;  //Here is where I would like to initialize.
                      //something like Previous = $();


$("SELECT[name='AccountType']").change(
    function () {
        //Hide Previous message if there was one.
        if(Previous == null || Previous.size() > 0){ 
            Previous.hide();
        }

        //Show the message if found and save it as previous.
        Previous = $("#"+this.value+"_Msg").show();

        //Get fisrt question
        var FirstQuestion = $(".FirstQuestion");
        if(this.value === ''){
            FirstQuestion.hide();
        }else{
            //Manually show FirstQuestion.
            FirstQuestion.show();
        }
    });
}

In the worst case I could do something like this:

    var Previous = { size : function () { return 0; } };

but that seems like overkill.

Solution 1:

This creates an empty jQuery-object:

$([])

Update: In newer versions of jQuery (1.4+), you can use:

$()

Solution 2:

$();

Returning an Empty Set

As of jQuery 1.4, calling the jQuery() method with no arguments returns an empty jQuery set (with a .length property of 0). In previous versions of jQuery, this would return a set containing the document node.

Source: api.jquery.com

Solution 3:

My advice is don't do it that way. There are a lot easier ways of doing this. Consider:

<select id="select" name="select">
  <option value="msg_1">Message 1</option>
  <option value="msg_2">Message 1</option>
  <option value="msg_3">Message 1</option>
</select>

<div class="msg_1 msg_3">
  ...
</div>

<div class="msg_1">
  ...
</div>

<div class="msg_2">
  ...
</div>

$(function() {
  $("#select").change(function() {
    var val = $(this).val();
    $("div." + val").show();
    $("div:not(." + val + ")").hide();
  });
});

Much easier. Basically give classes to indicate what to show and hide and then there is no tracking required. An alternative is:

$(function() {
  $("#select").change(function() {
    var val = $(this).val();
    $("div").each(function() {
      if ($(this).hasClass(val)) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
  });
});