before()
before()は指定した要素の後ろにコンテンツを追加するメソッドです。
HTMLの挿入
次のようなHTMLがあったとしして、
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>次のようなメソッドを実行すると、
$('.inner').before('<p>Test</p>');以下のようなHTMLに変換されます。
<div class="container">
<h2>Greetings</h2>
<p>Test</p>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>
</div>このようにbefore()は引数にHTML文字列を指定することで、指定した要素の後ろにHTMLを挿入します。
HTMLの移動
先程のHTMLに以下の命令を実行すると
$('.container').before($('h2'));次のようなHTMLに変換されます。
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>before()の引数に、すでにHTML上に存在する要素のjQueryオブジェクトやDOMオブジェクトを指定することで指定した要素の後ろにHTMLが移動されます。
更にHTMLを変更
第2引数には更にHTMLを変更したい場合の処理を記述できます。
$('.inner').before('<p>Test</p>',"<p>foo</p>");<div class="container">
<h2>Greetings</h2>
<p>Test</p>
<p>foo</p>
<div class="inner">Hello</div>
<p>Test</p>
<p>foo</p>
<div class="inner">Goodbye</div>
</div>before()の第2引数には配列で2個以上の処理を記述することも可能です。
$('.inner').before('<p>Test</p>',["<p>foo1</p>","<p>foo2</p>"]);コールバック関数
引数に関数オブジェクトを指定することで、コールバック関数の返り値をbefore()の引数として利用できます。
$('.inner').before(function(){
return "<p>foo1</p>";
});before()はjQuery 1.0で定義されたメソッドです。
jQuery 1.4.0での追加/変更jQuery 1.4より引数に関数オブジェクトの指定が可能になりました。
参考URL
.before() | jQuery API Documentation
登録日 : 2013年06月23日 最終更新日 : 2013年6月23日