jQuery API の before( function( index ) ) は、マッチした要素の前に追加するHTMLコンテンツを、function関数で設定するメソッド。その際、インデックス番号をfunction関数に引き渡すことができる。追加したHTMLコンテンツは、マッチした要素の兄要素となる。
記述方法
jQuery( セレクター ) . before( function( インデックス番号 ) {
return HTMLコンテンツ;
} );
return HTMLコンテンツ;
} );
「セレクター」に指定した要素の前に、「HTMLコンテンツ」に指定したHTMLコンテンツを追加。その際、インデックス番号をfunction関数に引き渡すことができる。
記述例
jQuery( '#jquery-sample' ) . before( function( index ) {
return '<span style="color: red;">サンプル</span>';
} );
return '<span style="color: red;">サンプル</span>';
} );
idが「jquery-sample」の要素の前に、<span style="color: red;">サンプル</span>を追加。
実装例（サンプル）
- 項目1
- 項目2
- 項目3
実装例（サンプル）の動作について
「before」ボタンをクリックすると、「項目1～3」の項目の上に、「項目nの上に追加」という項目を追加する。
「remove」ボタンをクリックすると、追加した項目を削除する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button-before' ) . click( function () {
jQuery( '.jquery-sample-li' ) . before( function( index ) {
return '<li class="jquery-sample-li-before">項目' + ( index + 1 ) + 'の上に追加</li>';
} );
} );
jQuery( '#jquery-sample-button-remove' ) . click( function () {
jQuery( '.jquery-sample-li-before' ) . remove();
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button-before' ) . click( function () {
jQuery( '.jquery-sample-li' ) . before( function( index ) {
return '<li class="jquery-sample-li-before">項目' + ( index + 1 ) + 'の上に追加</li>';
} );
} );
jQuery( '#jquery-sample-button-remove' ) . click( function () {
jQuery( '.jquery-sample-li-before' ) . remove();
} );
} );
// -->
</script>
HTML
<p>
<button id="jquery-sample-button-before">before</button>
<button id="jquery-sample-button-remove">remove</button>
</p>
<ul id="jquery-sample-ul">
<li class="jquery-sample-li">項目1</li>
<li class="jquery-sample-li">項目2</li>
<li class="jquery-sample-li">項目3</li>
</ul>
<button id="jquery-sample-button-before">before</button>
<button id="jquery-sample-button-remove">remove</button>
</p>
<ul id="jquery-sample-ul">
<li class="jquery-sample-li">項目1</li>
<li class="jquery-sample-li">項目2</li>
<li class="jquery-sample-li">項目3</li>
</ul>