jQuery API の toArray() は、マッチした全てのDOM要素を、配列として取得するメソッド。
戻り値
- Array
DOM要素を格納した配列。
記述方法
jQuery( セレクター ) . toArray()
「セレクター」にマッチしたDOM要素を、配列として取得する。
記述例
jQuery( '.sample' ) . toArray()
クラス名が「sample」であるDOM要素を、配列として取得する。
実装例（サンプル）
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
実装例（サンプル）の動作について
「逆順」ボタンをクリックすると、項目を逆に並べ替える。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . click(
function() {
jQuery . each(
jQuery( '#jquery-sample li' ) . toArray() . reverse(),
function( indexInArray, valueOfElement ) {
jQuery( '#jquery-sample' ) . append( valueOfElement );
}
);
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . click(
function() {
jQuery . each(
jQuery( '#jquery-sample li' ) . toArray() . reverse(),
function( indexInArray, valueOfElement ) {
jQuery( '#jquery-sample' ) . append( valueOfElement );
}
);
}
);
} );
// -->
</script>
CSS
<style>
<!--
#jquery-sample li {
color: #333333;
list-style-type: square;
}
-->
</style>
<!--
#jquery-sample li {
color: #333333;
list-style-type: square;
}
-->
</style>
HTML
<p>
<button id="jquery-sample-button">逆順</button>
</p>
<ul id="jquery-sample">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
<li>項目４</li>
<li>項目５</li>
</ul>
<button id="jquery-sample-button">逆順</button>
</p>
<ul id="jquery-sample">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
<li>項目４</li>
<li>項目５</li>
</ul>