I am wondering how to chain my custom functions and maintain context of 'this'.
Example:
$.fn.foo = function() {
var html = '<div class="foo"></div>';
if ($(this).hasClass(somthing) {
$(this).prepend(html);
}
}
$.fn.bar = function() {
var html = '<h3>bar</h3>';
$(this).find('.foo').prepend(html);
}
$('body').foo().bar();
When i try to use this code i get a TypeError: Cannot read property 'bar' of undefined
You need to return current element context, i.e. this from you custom method.
$.fn.foo = function() {
var html = '<div class="foo"></div>';
if ($(this).hasClass('somthing')) {
$(this).prepend(html);
}
return this; //The magic statement
}
$.fn.bar = function() {
var html = '<h3>bar</h3>';
$(this).find('.foo').prepend(html);
return this; //The magic statement
}
$('body').addClass('somthing').foo().bar();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Return this:
$.fn.foo = function() {
var html = '<div class="foo"></div>';
if ($(this).hasClass(somthing) {
$(this).prepend(html);
}
return this;
};
$.fn.bar = function() {
var html = '<h3>bar</h3>';
$(this).find('.foo').prepend(html);
return this;
};
$('body').foo().bar();
The jQuery extend function may be what you are looking for. It allows you to create a comma-separated list of functions that you can use in chained expressions
jQuery.fn.extend({
check: function() {return this.each(function() { this.checked = true; });} ,
uncheck: function() {return this.each(function() { this.checked = false; });
}})
Usage: this checks all checkboxes:
$( "input[type='checkbox']" ).check();
(example extracted from https://api.jquery.com/jquery.fn.extend/ )
