読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

end()メソッドを使う場合と使わない場合

<スポンサーリンク>

jQueryの公式リファレンスによると、end()メソッドはこんな説明があります。

jQueryオブジェクトを連鎖的に呼び出していった際に、現在の選択状態を破棄して1つ前の状態に戻します。

http://semooh.jp/jquery/api/traversing/end/_/

これだけだと微妙にわかりづらいので、ちょっとしたサンプルを使って実験してみました。

jQuery#end()メソッドを使わない場合のサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>end()メソッドを使わない</title>


<script src="js/jquery-1.11.1.js"></script>
<script>
$(document).ready(function() {
	$('li')
	  .filter(':odd').css('background-color', 'blue')
	  .css('color','red');
});
</script>

</head>
<body>

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>
</body>

画面には以下のように表示されます。

f:id:sho322:20140511143238j:plain

以下の部分で文字の色を赤く変えているのですが、その前の
filterで選んだ「偶数番目に適用する」が有効になっていて、偶数番目以外の文字の色は変わっていません。

.css('color','red');

では、ここにend()メソッドを加えてみます。
変更点だけ抜き出します。

<script>
$(document).ready(function() {
	$('li')
	  .filter(':odd').css('background-color', 'blue')
	  .end().css('color','red');
});
</script>

こうやってend()を加えるとどうなるでしょうか。

画面には以下のように表示されます。

f:id:sho322:20140511143248j:plain

ここで、偶数番目以外の文字も赤くなっていることがわかりました。

さて、冒頭のend()メソッドの説明に戻ります。

jQueryオブジェクトを連鎖的に呼び出していった際に、現在の選択状態を破棄して1つ前の状態に戻します。

これはつまりは、「現在の選択状態(=偶数だけ選ばれている状態)を破棄して、1つ前の状態(liを選んだ状態)に戻します」という意味だったんですね。

なお、jQueryのfilter()メソッドは、jQueryオブジェクトから渡されたエレメントのうち、条件に合致するものをフィルタリングしてくれるメソッドです。
このfilter()を使えば、何個も並んでるlistを渡して、その偶数番目だけ色を変えたりとか、2番めの要素だけ太字にしたりすることができます。