jQuery - カスタム関数の連鎖

Question

私はカスタム関数を連鎖させ、 'this'のコンテキストを維持する方法を知りたいと思います。

例：

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

私はこのコードを使用しようとすると、私はTypeError例外を取得する：あなたは、現在の要素のコンテキストを返すために必要なプロパティを読み取ることができません未定義

Answer 1

の「バー」、すなわちthisからあなたはカスタムメソッド。

$.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

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