js STUDIO

.andSelf() 1.8 非推奨

要素の集合に、現在マッチしている要素に加え、一つ前のマッチした要素を追加します。

.andSelf( ) 1.2追加

.end()で説明しているように、jQueryオブジェクトは内部のスタックに、 これまでにマッチしてきた要素セットの足跡を保持しています。 Traversalメソッドのどれかが呼び出されると、要素の新しいセットがスタックに追加されます。 もし、前の要素のセットも含めたければ、.andSelf()はその助けをしてくれます。

次のようなシンプルなリストがページ内に存在する場合、 

<ul>
   <li>リスト項目1</li>
   <li>リスト項目2</li>
   <li class="third-item">リスト項目3</li>
   <li>リスト項目4</li>
   <li>リスト項目5</li>
</ul>

下記のコードが実行されると、リスト項目3,4,5の背景色が赤になります。 

$('li.third-item').nextAll().andSelf()
  .css('background-color', 'red');</code>

最初のセレクタ指定により、3つ目の行が選択されストックに追加されます。 その後に、.nextAll()によって4つ目と5つ目のセットがストックに追加されます。 そして最終的に.andSelf()によって、この2つのセットがマージされ、この3つの jQueryオブジェクトが生成されます。{[<li.third-item>,<li>,<li> ]}

デモ

DIV要素をボーダーで囲った後、P要素をマッチ要素に加えて背景を黄色にする処理を行なっています。

<!DOCTYPE html>
<html>
<head>
  <style>
  p, div { margin:5px; padding:5px; }
  .border { border: 2px solid red; }
  .background { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
    <p>第1パラグラフ</p>
    <p>第2パラグラフ</p>
  </div>
<script>
    $("div").find("p").andSelf().addClass("border");
    $("div").find("p").addClass("background");
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM