jQuery - 链接自定义函数

Question

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

Answer 1

You need to return current element context, ie 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> 

Answer 2

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();

Answer 3

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/ )