jQuery API の jQuery . extend( target[, object1][, objectN] ) は、targetに指定したオブジェクトに、複数のオブジェクトの内容をマージ（併合）する。
引数
- target
新しいプロパティを受け取るオブジェクト。
- object1
マージしたい追加プロパティを含むオブジェクト。
- objectN
マージしたい追加プロパティを含むオブジェクト。
戻り値
- Object
オブジェクト。
記述方法
jQuery . extend( target, object1, objectN );
targetに指定したオブジェクトに、object1、objectNをマージする。
記述例
var target = {
keyA: 'targetValueA',
keyB: 'targetValueB',
keyC: 'targetValueC',
keyD: 'targetValueD',
};
var object1 = {
keyA: 'object1ValueA',
keyB: 'object1ValueB',
};
var object2 = {
keyB: 'object2ValueB',
keyC: 'object2ValueC',
};
jQuery . extend( target, object1, object2 );
jQuery . each( target, function( key, value ) {
jQuery( '#sample' ) . append( '<p>' + key + ': ' + value + '</p>' );
} );
keyA: 'targetValueA',
keyB: 'targetValueB',
keyC: 'targetValueC',
keyD: 'targetValueD',
};
var object1 = {
keyA: 'object1ValueA',
keyB: 'object1ValueB',
};
var object2 = {
keyB: 'object2ValueB',
keyC: 'object2ValueC',
};
jQuery . extend( target, object1, object2 );
jQuery . each( target, function( key, value ) {
jQuery( '#sample' ) . append( '<p>' + key + ': ' + value + '</p>' );
} );
targetに、object1、object2をマージする。
idが「sample」の要素に、
<p>keyA: object1ValueA</p>
<p>keyB: object2ValueB</p>
<p>keyC: object2ValueC</p>
<p>keyD: targetValueD</p>
<p>keyB: object2ValueB</p>
<p>keyC: object2ValueC</p>
<p>keyD: targetValueD</p>
実装例（サンプル）
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
var target = {
Tarou: { Mathematics: 100 },
Hanako: { Mathematics: 52, Science: 65, English: 100 },
Ichirou: { Mathematics: 71, English: 83 },
Sakura: { Mathematics: 64, Science: 79, English: 96 },
};
var object1 = {
Tarou: { Mathematics: 100, Science: 98, English: 66 },
Hanako: { Mathematics: 52 },
};
var object2 = {
Ichirou: { Mathematics: 71, Science: 77, English: 83 },
};
jQuery . extend( target, object1, object2 );
var contents = '';
jQuery . each( target, function( key, value ) {
contents += '<li><p>' + key + '</p><ul>';
jQuery . each( value, function( key2, value2 ) {
contents += '<li><p>' + key2 + ': ' + value2 + '</p></li>';
} );
contents += '</ul></li>';
} );
jQuery( '#jquery-sample' ) . append( contents );
} );
// -->
</script>
<!--
jQuery( function() {
var target = {
Tarou: { Mathematics: 100 },
Hanako: { Mathematics: 52, Science: 65, English: 100 },
Ichirou: { Mathematics: 71, English: 83 },
Sakura: { Mathematics: 64, Science: 79, English: 96 },
};
var object1 = {
Tarou: { Mathematics: 100, Science: 98, English: 66 },
Hanako: { Mathematics: 52 },
};
var object2 = {
Ichirou: { Mathematics: 71, Science: 77, English: 83 },
};
jQuery . extend( target, object1, object2 );
var contents = '';
jQuery . each( target, function( key, value ) {
contents += '<li><p>' + key + '</p><ul>';
jQuery . each( value, function( key2, value2 ) {
contents += '<li><p>' + key2 + ': ' + value2 + '</p></li>';
} );
contents += '</ul></li>';
} );
jQuery( '#jquery-sample' ) . append( contents );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-sample {
color: #333333;
list-style-type: square;
}
-->
</style>
<!--
#jquery-sample {
color: #333333;
list-style-type: square;
}
-->
</style>
HTML
<ul id="jquery-sample">
</ul>
</ul>