現在選択状態にあるタグ名を列挙して表示する関数”showTags”をjQuery.fnに設定。
(0) p要素を選択
(1) それらの中にあるspan要素を選択
(2) endを用いて(0)の選択状態に戻す
としながら、それぞれの要素選択状態を表示。
Traversing/API/jQuery
end()
jQueryオブジェクトを連鎖的に呼び出していった際に、現在の選択状態を破棄して1つ前の状態に戻します。
1つ前の状態が無い場合、空の選択状態が返ってきます。
状態を戻せるのは全てのjQueryオブジェクトを返すTarversing関数で、以下のようなものが挙げられます。
add
andSelf
children
filter
find
map
next
nextAll
not
parent
parents
prev
prevAll
siblings
slice
これらに加えて、Manipulation関数であるclone関数などにも用いることができます。
また、次の関数も対象となっています。
clone
appendTo
prependTo
insertBefore
insertAfter
replaceAll
この関数は、連鎖関数をブロック要素的に利用するためのものだと捉えると判り易いでしょう。
1つ前の状態が無い場合、空の選択状態が返ってきます。
状態を戻せるのは全てのjQueryオブジェクトを返すTarversing関数で、以下のようなものが挙げられます。
add
andSelf
children
filter
find
map
next
nextAll
not
parent
parents
prev
prevAll
siblings
slice
これらに加えて、Manipulation関数であるclone関数などにも用いることができます。
また、次の関数も対象となっています。
clone
appendTo
prependTo
insertBefore
insertAfter
replaceAll
この関数は、連鎖関数をブロック要素的に利用するためのものだと捉えると判り易いでしょう。
戻り値
jQuery
ひとつ前の状態の要素集合
サンプル
サンプル1
<p> Hi there <span>how</span> are you <span>doing</span>? </p> <p> This <span>span</span> is one of several <span>spans</span> in this <span>sentence</span>. </p> <div> Tags in jQuery object initially: <b></b> </div> <div> Tags in jQuery object after find: <b></b> </div> <div> Tags in jQuery object after end: <b></b> </div>
jQuery.fn.showTags = function (n) {
var tags = this.map(function () {
return this.tagName;
})
.get().join(", ");
$("b:eq(" + n + ")").text(tags);
return this;
};
$("p").showTags(0)
.find("span")
.showTags(1)
.css("background", "yellow")
.end()
.showTags(2)
.css("font-style", "italic");
[全コードを表示]
[実行結果を単体で表示]