jQuery API の jQuery . extend( [deep], target, object1[, objectN] ) は、targetに指定したオブジェクトに、複数のオブジェクトの内容をマージ（併合）する。deepに、「true」を指定することで、再帰的にマージすることができる。
引数
- deep
「true」を指定すると、再帰的にマージする。
- target
新しいプロパティを受け取るオブジェクト。
- object1
マージしたい追加プロパティを含むオブジェクト。
- objectN
マージしたい追加プロパティを含むオブジェクト。
戻り値
- Object
オブジェクト。
記述方法
jQuery . extend( true, target, object1, objectN );
targetに指定したオブジェクトに、object1、objectNを、再帰的にマージする。
記述例
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: 98, Science: 98, English: 66 },
Hanako: { Mathematics: 63 },
};
var object2 = {
Ichirou: { Mathematics: 75, Science: 77, English: 90 },
};
jQuery . extend( true, target, object1, object2 );
var contents = '';
jQuery . each( target, function( key, value ) {
contents += '\n\t<li><p>' + key + '</p>\n\t\t<ul>';
jQuery . each( value, function( key2, value2 ) {
contents += '\n\t\t\t<li><p>' + key2 + ': ' + value2 + '</p></li>';
} );
contents += '\n\t\t</ul>\n\t</li>';
} );
jQuery( 'ul#sample' ) . append( contents );
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: 98, Science: 98, English: 66 },
Hanako: { Mathematics: 63 },
};
var object2 = {
Ichirou: { Mathematics: 75, Science: 77, English: 90 },
};
jQuery . extend( true, target, object1, object2 );
var contents = '';
jQuery . each( target, function( key, value ) {
contents += '\n\t<li><p>' + key + '</p>\n\t\t<ul>';
jQuery . each( value, function( key2, value2 ) {
contents += '\n\t\t\t<li><p>' + key2 + ': ' + value2 + '</p></li>';
} );
contents += '\n\t\t</ul>\n\t</li>';
} );
jQuery( 'ul#sample' ) . append( contents );
targetに、object1、object2を、再帰的にマージする。
idが「sample」のul要素に、
<li><p>Tarou</p>
<ul>
<li><p>Mathematics: 98</p></li>
<li><p>Science: 98</p></li>
<li><p>English: 66</p></li>
</ul>
</li>
<li><p>Hanako</p>
<ul>
<li><p>Mathematics: 63</p></li>
<li><p>Science: 65</p></li>
<li><p>English: 100</p></li>
</ul>
</li>
<li><p>Ichirou</p>
<ul>
<li><p>Mathematics: 75</p></li>
<li><p>English: 90</p></li>
<li><p>Science: 77</p></li>
</ul>
</li>
<li><p>Sakura</p>
<ul>
<li><p>Mathematics: 64</p></li>
<li><p>Science: 79</p></li>
<li><p>English: 96</p></li>
</ul>
</li>
<ul>
<li><p>Mathematics: 98</p></li>
<li><p>Science: 98</p></li>
<li><p>English: 66</p></li>
</ul>
</li>
<li><p>Hanako</p>
<ul>
<li><p>Mathematics: 63</p></li>
<li><p>Science: 65</p></li>
<li><p>English: 100</p></li>
</ul>
</li>
<li><p>Ichirou</p>
<ul>
<li><p>Mathematics: 75</p></li>
<li><p>English: 90</p></li>
<li><p>Science: 77</p></li>
</ul>
</li>
<li><p>Sakura</p>
<ul>
<li><p>Mathematics: 64</p></li>
<li><p>Science: 79</p></li>
<li><p>English: 96</p></li>
</ul>
</li>
実装例（サンプル）
実装例（サンプル）のソースコード
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: 98, Science: 98, English: 66 },
Hanako: { Mathematics: 63 },
};
var object2 = {
Ichirou: { Mathematics: 75, Science: 77, English: 90 },
};
jQuery . extend( true, 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: 98, Science: 98, English: 66 },
Hanako: { Mathematics: 63 },
};
var object2 = {
Ichirou: { Mathematics: 75, Science: 77, English: 90 },
};
jQuery . extend( true, 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>