Umbrella - にほんご。

before

.before(html, [elements])

マッチした要素の前に兄弟要素としてHTML要素を追加します。


パラメータ

html : 下記参照
  • 以下のいずれかの要素。
    • string : 挿入されるHTML。
    • instance : Umbrellaのインスタンス。
    • HTML node
    • array : HTML nodeの配列。
  • 上記のいずれかを返すコールバック。以下のパラメータが渡されます。
    • el : elementsパラメータの現在の要素。指定されていない場合は{}、数値の場合はi
    • i : 現在の要素のインデックス。
elements : 下記参照
htmlパラメータにコールバックを指定した場合に有効です。 以下のいずれかになります。オプションです。
  • コールバックに渡される要素の配列。 コールバックは要素ごとに1回ずつ処理され、全て連続で追加されます。
  • CSSセレクタ。 マッチした要素ごとに1回ずつ実行されます。
  • 数値。 関数は指定した数値の数だけ実行されます。
.before(html)
 
.before('<div>')
.before(u('<div>'))
.before(u('<div>').first()) // Same as document.createElement('div')
.before(u('<div></div><div></div>'))
.before(function(){})
.before(function(el){}, elements)
.append(function(el){}, 10)

戻り値

u
Umbrellaのインスタンスを返します。

articleに、headerを追加します。

u('article').after('<header>Hello world</header>');

リンクの前に3つの要素を追加します。 以下の例は全て同じ動作になります。

// 1つの文字列で全てを追加。
u('a.main').before('<a>One</a><a>Two</a><a>Three</a>');
 
// メソッドチェーンで追加。
u('a.main').before('<a>One</a>').before('<a>Two</a>').before('<a>Three</a>');
 
// functionを使って追加。
var cb = function(txt){ return '<a>' + txt + '</a>' };
u('a.main').before(cb, ['One', 'Two', 'Three']);
 
// ES6の記述で追加。
u('a.main').before(txt => `<a>${ txt }</a>`, ['One', 'Two', 'Three']);

結果は以下になります。

<a>One</a>
<a>Two</a>
<a>Three</a>
<a class="main"></a>
 
<!-- previous data -->

HTMLノードを作成して、イベントを追加することもできます。

function greeting(){ alert('Hello world'); }
 
u('a.main').before(function(){
  return u('<a>').addClass('hi').on('click', greeting).html('Greetings!');
});

デモ

"デモ用文字列"をクリックすると、 "デモ用文字列"の上に、"One"、"Two"、"Three"の文字を追加されます。

デモ用文字列

JavaScript

u('#demo').on('click', function() {
  var cb = function(txt){ return '<div>' + txt + '</div>' };
  u(this).before(cb, ['One', 'Two', 'Three']);
});

HTML

<div id="demo">デモ用文字列</div>

関連項目

.after() マッチした要素の後ろに兄弟要素としてHTML要素を追加します。

.append() マッチした要素の子要素として、HTML要素を末尾に追加します。

.prepend() マッチした要素の子要素として、HTML要素を先頭に追加します。


© 2014 Francisco Presencia Released under the MIT license

このコンテンツはFrancisco Presencia(franciscop)によるUmbrella JSドキュメントを翻訳/改変したものです。