Question

This is my plug-in use for draw google line chart.

(function( $ ) {
    $.fn.loadLineChart = function(dataArr, title) {

        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(function() { drawChart(dataArr, title) });

        function drawChart(dataArr, title) {

            var data = google.visualization.arrayToDataTable(dataArr);

            var options = {
                title: title
            };

            var chart = new google.visualization.LineChart($('#chat_div')[0]);
            chart.draw(data, options);
        }
    };
})( jQuery );

I call this plug-in as following.

<script type="text/javascript">        
    var data = '';
    var title = '';

    $('#chart_div').loadLineChart(data, title);
</script>

Now i hard code current element chart_div in the plugin. How i use current element in that function?

Answer 1

Since a jQuery plugin is just a method of jQuery.prototype (which is aliased to jQuery.fn), you can refer to the current instance of jQuery inside your plugin with this:

(function( $ ) {
    $.fn.loadLineChart = function(dataArr, title) {
        var $this = this;
        //...
        function drawChart(dataArr, title) {
            //...
            var chart = new google.visualization.LineChart($this[0]);
        }
    };
})( jQuery );

Notice that in this case you will need to store a reference to the current value of this in the loadLineChart method, since this will have a different value in the drawChart function.