jQuery API の addBack( selector ) は、現在の選択要素と、前選択要素のうちselectorにマッチした要素群を、共に選択するメソッド。
記述例
jQuery( 'div' ) . find( 'p' ) . addBack( '.sample');
div要素の中のp要素と、クラス名が「sample」のdiv要素を、共に選択。
実装例(サンプル)
div要素1
p要素1。
p要素2。
div要素2
p要素1。
p要素2。
実装例(サンプル)の動作について
「toggle」ボタンをクリックすると、「p要素1」と「p要素2」の背景色を黄色にし、枠線を赤色にする。「div要素1」の枠線も赤色にする。
「toggle」ボタンを再度クリックすると、元に戻す。
実装例(サンプル)のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-sample-button' ) . toggle(
function() {
jQuery( '.jquery-api-sample' )
. find( 'p' )
. css( 'backgroundColor', 'yellow' )
. addBack( '#jquery-api-sample' )
. css( 'border', '3px solid red' );
},
function() {
jQuery( '.jquery-api-sample' )
. find( 'p' )
. css( 'backgroundColor', 'pink' )
. addBack( '#jquery-api-sample' )
. css( 'border', '3px solid gray' );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-sample-button' ) . toggle(
function() {
jQuery( '.jquery-api-sample' )
. find( 'p' )
. css( 'backgroundColor', 'yellow' )
. addBack( '#jquery-api-sample' )
. css( 'border', '3px solid red' );
},
function() {
jQuery( '.jquery-api-sample' )
. find( 'p' )
. css( 'backgroundColor', 'pink' )
. addBack( '#jquery-api-sample' )
. css( 'border', '3px solid gray' );
}
);
} );
// -->
</script>
CSS
<style type="text/css">
<!--
.jquery-api-sample {
margin: 10px;
padding: 20px;
background-color: pink;
border: 3px solid gray;
border-radius: 10px;
}
.jquery-api-sample p {
margin: 10px;
padding: 20px;
background-color: pink;
border: 3px solid gray;
border-radius: 10px;
color: #303030;
}
-->
</style>
<!--
.jquery-api-sample {
margin: 10px;
padding: 20px;
background-color: pink;
border: 3px solid gray;
border-radius: 10px;
}
.jquery-api-sample p {
margin: 10px;
padding: 20px;
background-color: pink;
border: 3px solid gray;
border-radius: 10px;
color: #303030;
}
-->
</style>
HTML
<button id="jquery-api-sample-button">toggle</button>
<div id="jquery-api-sample" class="jquery-api-sample">
div要素1
<p>p要素1。</p>
<p>p要素2。</p>
</div>
<div class="jquery-api-sample">
div要素2
<p>p要素1。</p>
<p>p要素2。</p>
</div>
<div id="jquery-api-sample" class="jquery-api-sample">
div要素1
<p>p要素1。</p>
<p>p要素2。</p>
</div>
<div class="jquery-api-sample">
div要素2
<p>p要素1。</p>
<p>p要素2。</p>
</div>