js STUDIO

.addBack()

要素の集合に、現在マッチしている要素に加え、一つ前のマッチした要素を追加します。セレクトを指定することでフィルタリングすることが可能です。

.addBack( [selector ] ) 1.8追加

戻り値:jQuery

引数 説明
selector 型:Selector
現在マッチしている要素に対して絞り込むためのセレクタ文字列を指定します。

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

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

<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().addBack()
  .css('background-color', 'red');

最初のセレクタ指定により、3つ目の行が選択されストックに追加されます。 その後に、.nextAll()によって4つ目と5つ目のセットがストックに追加されます。 そして最終的に.addBack()によって、この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; }
.left, .right { width: 45%; float: left;}
.right { margin-left:3%; }
    </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div class="left">
  <p><strong><code>addBack()</code>実行前</strong></p>
  <div class="before-addback">
    <p>第1パラグラフ</p>
    <p>第2パラグラフ</p>
  </div>
</div>
<div class="right">
  <p><strong><code>addBack()</code>実行後</strong></p>
  <div class="after-addback">
    <p>第1パラグラフ</p>
    <p>第2パラグラフ</p>
  </div>
</div>

<script>
$("div.left, div.right").find("div, div > p").addClass("border");
// 1つ目の例
$("div.before-addback").find("p").addClass("background");
// 2つ目の例
$("div.after-addback").find("p").addBack().addClass("background");
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM