I recently came across a piece of code. It is as follows:

      var myFeature = {

'config' : { 
    'container' : $('#myFeature')
},

'init' : function(config) { 

    if (config && typeof(config) == 'object') {
        $.extend(myFeature.config, config);
    }

    myFeature.$container = myFeature.config.container;

    myFeature.$sections = myFeature.$container.
        find('ul.sections > li'); 

    myFeature.$section_nav = $('<ul/>').
        attr('id','section_nav').
        prependTo(myFeature.$container);

    myFeature.$item_nav = $('<ul/>').
        attr('id','item_nav').
        insertAfter(myFeature.$section_nav);

    myFeature.$content = $('<div/>').
        attr('id','content').
        insertAfter(myFeature.$item_nav);

    myFeature.buildSectionNav(myFeature.$sections);
    myFeature.$section_nav.find('li:first').click();

    myFeature.$container.find('ul.sections').hide();

    myFeature.initialized = true;

},


'buildSectionNav' : function($sections) {

    $sections.each(function() {

        var $section = $(this);

        $('<li/>').
            text($section.find('h2:first').text()).
            appendTo(myFeature.$section_nav).
            data('section', $section).
            click(myFeature.showSection);
    });

},

'buildItemNav' : function($items) {

    $items.each(function() {
        var $item = $(this);

        $('<li/>').
            text($item.find('h3:first').text()).
            appendTo(myFeature.$item_nav).
            data('item', $item).
            click(myFeature.showContentItem);

    });

},

'showSection' : function() { 

    var $li = $(this);

    myFeature.$item_nav.empty();
    myFeature.$content.empty();

    var $section = $li.data('section');

    $li.addClass('current').
        siblings().removeClass('current');

    var $items = $section.find('ul li');

    myFeature.buildItemNav($items);

    myFeature.$item_nav.find('li:first').click();

},

'showContentItem' : function() {

    var $li = $(this);

    $li.addClass('current').
        siblings().removeClass('current');

    var $item = $li.data('item');

    myFeature.$content.html($item.html());

}

 };

I know what $('#myFeature'), $(this) means. But what does $li and myFeature.$container mean? Are they some type of variables? If so, what is the scope of myFeature.$container? since it is not declared using var, is it global?

I recently came across a piece of code. It is as follows:

      var myFeature = {

'config' : { 
    'container' : $('#myFeature')
},

'init' : function(config) { 

    if (config && typeof(config) == 'object') {
        $.extend(myFeature.config, config);
    }

    myFeature.$container = myFeature.config.container;

    myFeature.$sections = myFeature.$container.
        find('ul.sections > li'); 

    myFeature.$section_nav = $('<ul/>').
        attr('id','section_nav').
        prependTo(myFeature.$container);

    myFeature.$item_nav = $('<ul/>').
        attr('id','item_nav').
        insertAfter(myFeature.$section_nav);

    myFeature.$content = $('<div/>').
        attr('id','content').
        insertAfter(myFeature.$item_nav);

    myFeature.buildSectionNav(myFeature.$sections);
    myFeature.$section_nav.find('li:first').click();

    myFeature.$container.find('ul.sections').hide();

    myFeature.initialized = true;

},


'buildSectionNav' : function($sections) {

    $sections.each(function() {

        var $section = $(this);

        $('<li/>').
            text($section.find('h2:first').text()).
            appendTo(myFeature.$section_nav).
            data('section', $section).
            click(myFeature.showSection);
    });

},

'buildItemNav' : function($items) {

    $items.each(function() {
        var $item = $(this);

        $('<li/>').
            text($item.find('h3:first').text()).
            appendTo(myFeature.$item_nav).
            data('item', $item).
            click(myFeature.showContentItem);

    });

},

'showSection' : function() { 

    var $li = $(this);

    myFeature.$item_nav.empty();
    myFeature.$content.empty();

    var $section = $li.data('section');

    $li.addClass('current').
        siblings().removeClass('current');

    var $items = $section.find('ul li');

    myFeature.buildItemNav($items);

    myFeature.$item_nav.find('li:first').click();

},

'showContentItem' : function() {

    var $li = $(this);

    $li.addClass('current').
        siblings().removeClass('current');

    var $item = $li.data('item');

    myFeature.$content.html($item.html());

}

 };

I know what $('#myFeature'), $(this) means. But what does $li and myFeature.$container mean? Are they some type of variables? If so, what is the scope of myFeature.$container? since it is not declared using var, is it global?

• javascript
• jquery
• variables

• $ is a char, so its just a var name bination – Jakub Commented Sep 20, 2011 at 14:19
• possible duplicate of How does Jquery use the dollar sign? – user113716 Commented Sep 20, 2011 at 15:03

8 Answers 8

$li and $container are just variable names, named like that so the programmer knows they are jQuery extended objects.

this is just mons variables, $ is authorized to be part of a var name and the author just like to name his vars with a $ at start. Regarding myFeature.$container this is just a property of the myFeature object so it's the same scope of myFeature

No, it's just a simple variable name.
I do the same with variables which contain jquery objects to quickly distinguish them from my other (non-jquery) vars.

It just allows you to identify the jQuery variables easily from JavaScript variables.

For example:

var $section = $li.data('section'); //jQuery variable
var num = 2; //JavaScript variable

Can be useful if you have a lot of code with JavaScript and jQuery variables.

See here for more info.

While using a framework like jQuery it is often so that the programmer puts $ signs in front of a variable name so that he knows that the content is a jQuery object.

So for example when you bind a click event and inside the function you have the variable this available. But this refers to the dom element and not to the jquery object.

So for example you could use something like this to recognize the value of a variable:

var $this = $(this);

$this.doSomeJquery();

The dollar sign ($) is an alias for "JQuery"

I mean that

$(document).ready(function(){



});

is like write:

jQuery(document).ready(function(){



});

Edit: I miss interpreted the question, sorry.

Yes, are variables name

I'd say it's just some code convention to indicate that it's a variable containing a Jquery object (instead of a DOM object).

If you look at the JQuery source (http://bit.ly/jqsource) - right at the end, you'll see:

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

Its just a reference to window.jQuery.