jQuery APIリファレンスユーティリティ:配列とオブジェクト操作
- jQuery.each(object, callback)〔オブジェクトと配列の両方で使える汎用的な繰り返し処理を行う関数 〕
- jQuery.extend([deep, ]target, object[, objectN])〔オブジェクトを拡張〕
- jQuery.grep(array, callback[, invert])〔フィルター関数を使用して配列の要素を抽出し、抽出した要素だけを配列に残す〕
- jQuery.makeArray(obj)〔オブジェクトを配列にする〕
- jQuery.map(array, calllback)〔配列のアイテムをすべて他の配列のアイテムに変換〕
- jQuery.inArray(value, array)〔配列の中に最初のパラメータのインデックス番号を定める(見つからない場合は-1)〕
- jQuery.merge(first, second)〔2つの配列を結合する〕
- jQuery.unique(array)〔配列の要素から重複する要素をすべて削除〕
jQuery.each(object, callback)
オブジェクトと配列の両方で使える汎用的な繰り返し処理を行う関数
2009/2/27
オブジェクトと配列の両方で使える汎用的な繰り返し処理を行う関数です。
この関数は$().each()と異なり、何にでも繰り返し処理を行うことができます。
コールバック関数は、2つの引数をとります。 第1引数にはキー(オブジェクト)またはインデックス(配列)、第2引数にその値を引数を指定します。
繰り返し処理を抜けたい場合は、関数がFALSEを返すようにしてください。 FALSEを返さない場合は、forループの中のcontinue文と同様、次の繰り返し処理にスキップします。
第1引数objectには、繰り返すオブジェクトまたは配列を指定します
第2引数callbackには、すべてのオブジェクトに実行する関数を指定します
function callback(indexInArray, valueOfElement){ var booleanKeepGoing; this; // = valueOfElement(オブジェクトにキャストされる) return booleanKeepGoing; // FALSEでなければ、任意。ループを抜けたいならFALSEを返すようにする }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>ユーティリティ:配列とオブジェクト操作:jQuery.eachの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var arr = [ "one", "two", "three", "four", "five" ];
var obj = { one:1, two:2, three:3, four:4, five:5 };
jQuery.each(arr, function() {
$("#" + this).text("My id is " + this + ".");
return (this != "four"); /* will stop running to skip "five" */
});
jQuery.each(obj, function(i, val) {
$("#" + i).append(document.createTextNode(" - " + val));
});
});
</script>
<style type="text/css">
#sample div { color:blue; }
#sample #five { color:red; }
</style>
</head>
<body>
<div id="wrap">
<h1>ユーティリティ:配列とオブジェクト操作:jQuery.eachの使用例 | jQuery</h1>
<p>▼配列をループして値と同じID名の要素に値を挿入していき、値が「four」になったときにループを抜けます。<br> オブジェクトをループしてキーと同じID名の要素に値を追加していきます。</p>
<!-- CODE -->
<div id="sample">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
</div>
<!-- / CODE -->
</div>
</body>
</html>
jQuery.extend([deep, ]target, object[, objectN])
オブジェクトを拡張
2009/2/27
オブジェクトに、1つあるいは複数のオブジェクトを拡張したオブジェクトを返します。
指定した対象がない場合は、JQueryの名前空間自身が拡張されます。 これは、jQueryに新しいメソッドを追加しようと思っているプラグイン制作者に役立つことがあります。
第1引数にTRUEを指定すると、jQueryはディープコピーを行い、見つけたオブジェクトを再帰的にコピーします。 省略またはFALSEを指定した場合は、そのコピーは拡張前のオリジナルのオブジェクト構造を共有します。
定義されていないプロパティは、コピーされませんが、オブジェクトのプロパティから継承したプロパティはコピーされます。
オプションの第1引数deepを指定すると、再帰的に結合されます
第2引数targetには、拡張するオブジェクトを指定します
第3引数object1には、最初に結合されるオブジェクトを指定します
オプションの第4引数objectNには、最初のオブジェクトに結合するオブジェクトを必要に応じて指定します

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>ユーティリティ:配列とオブジェクト操作:jQuery.extendの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
/* settings == { validate: true, limit: 5, name: "bar" } */
$.each(settings, function(i, val){
$("<li>"+i+":"+val+"</li>").appendTo("#res");
});
var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend(empty, defaults, options);
/* settings == { validate: true, limit: 5, name: "bar" } */
/* empty == { validate: true, limit: 5, name: "bar" } */
$.each(settings, function(i, val){
$("<li>"+i+":"+val+"</li>").appendTo("#res2");
});
$.each(empty, function(i, val){
$("<li>"+i+":"+val+"</li>").appendTo("#res3");
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>ユーティリティ:配列とオブジェクト操作:jQuery.extendの使用例 | jQuery</h1>
<!-- CODE -->
<p>▼設定とオプションと、変更した設定を結合します。</p>
<ul id="res"></ul>
<p>▼初期値を変更しないで、初期値とオプションを結合します。</p>
<ul id="res2"></ul>
<ul id="res3"></ul>
<!-- / CODE -->
</div>
</body>
</html>
jQuery.grep(array, callback[, invert])
フィルター関数を使用して配列の要素を抽出し、抽出した要素だけを配列に残す
2009/2/27
フィルター関数を使用して配列の要素を抽出し、抽出した要素だけを配列に残します。
フィルタリングするコールバック関数には、2つの引数(第1引数は要素の配列、第2引数は要素の配列におけるインデックス番号)が渡されます。 配列に残したい要素は、コールバック関数がTRUEを返すようにします。 配列から除去したい要素は、コールバック関数がFALSEを返すようにします。
第1引数arrayには、抽出したい要素がある配列を指定します
-
第2引数callbackには、各要素を処理するコールバック関数を指定します。 コールバック関数は真偽値を返す必要があります。 「ラダム形式」関数の特徴は、他のフレームワークとの互換性のためにjquery.js v1.2.3で削除されました。
function callback(elementOfArray, indexInArray){ var shouldKeepIt; this; // == window rturn shouldKeepIt; } -
オプションの第3引数invertを省略あるいはFALSEを指定すると、逆になります。 配列に残したい要素は、コールバック関数がFALSEを返すようにします。 配列から除去したい要素は、コールバック関数がTRUEを返すようにします。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>ユーティリティ:配列とオブジェクト操作:jQuery.grepの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var arr = [ 1, 2, 3, 4, 5, 1, 2, 3, 4, 5 ];
$("#res1").text(arr.join(", "));
arr = $.grep(arr, function(n, i){
/* 値が「1」の要素と、インデックス番号が4より大きい要素だけ返す */
return (n != 1 && i > 4);
});
$("#res2").text(arr.join(", "));
/* 値が「2」でない要素だけ返す */
arr = $.grep(arr, function (a) { return a != 2; });
$("#res3").text(arr.join(", "));
/* invert指定 */
var arr2 = [ 1, 2, 3, 4, 5, 1, 2, 3, 4, 5 ];
$("#res4").text(arr2.join(", "));
arr2 = $.grep(arr2, function(n, i){
/* 値が「1」の要素と、インデックス番号が4より大きい要素だけ返す */
return (n != 1 && i > 4);
},true);
$("#res5").text(arr2.join(", "));
/* 値が「2」でない要素だけ返す */
arr2 = $.grep(arr2, function (a) { return a != 2; },true);
$("#res6").text(arr2.join(", "));
});
</script>
<style type="text/css">
th { text-align:left; }
#res1,#res4 { color:blue; }
#res2,#res5 { color:green; }
#res3,#res6 { color:red; }
</style>
</head>
<body>
<div id="wrap">
<h1>ユーティリティ:配列とオブジェクト操作:jQuery.grepの使用例 | jQuery</h1>
<!-- CODE -->
<table>
<tr>
<th>【invert省略、またはinvertに<span class='bool'>FALSE</span>を指定】</th>
<th>【invertに<span class='bool'>TRUE</span>を指定】</th>
</tr>
<tr>
<td>
<p>▼元の配列</p>
<p id="res1"></p>
<p>▼配列の要素を、値が「1」の要素と、インデックス番号が4より大きい要素だけにします。</p>
<p id="res2"></p>
<p>▼配列の要素を、値が「2」でない要素だけにします。</p>
<p id="res3"></p>
</td>
<td>
<p>▼元の配列</p>
<p id="res4"></p>
<p>▼逆になるので、値が「1」の要素と、インデックス番号が4以下の要素だけにします。</p>
<p id="res5"></p>
<p>▼逆になるので、配列の要素を、値が「2」の要素だけにします。</p>
<p id="res6"></p>
</td>
</tr>
</table>
<!-- / CODE -->
</div>
</body>
</html>
jQuery.makeArray(obj)
オブジェクトを配列にする
2009/2/27
指定したオブジェクトを配列に変換します。
この関数を内部的に使用するjQueryを使用すれば、この関数は不要です。
第1引数objには、配列に変換するオブジェクトを指定します

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>ユーティリティ:配列とオブジェクト操作:jQuery.makeArrayの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var ary=$.makeArray(document.getElementsByTagName("li"));
ary.reverse(); /* DOM要素のリスト上で配列メソッドを使用 */
$(ary).appendTo("ol");
});
</script>
<style type="text/css">
li { color:red; }
</style>
</head>
<body>
<div id="wrap">
<h1>ユーティリティ:配列とオブジェクト操作:jQuery.makeArrayの使用例 | jQuery</h1>
<p>▼HTML要素のコレクションを配列に変換します。</p>
<!-- CODE -->
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
<ol>
</ol>
<!-- / CODE -->
</div>
</body>
</html>
jQuery.map(array, calllback)
配列のアイテムをすべて他の配列のアイテムに変換
2009/2/27
配列の中にあるすべてのアイテムを、他の配列のアイテムに変換します。
このメソッドに提供される変換関数は、配列の中にある各アイテムで呼ばれ、2つの引数(変換されるアイテム、配列におけるインデックス番号)が渡されます。
関数は、変換した値、(アイテムを削除するための)「null」、または値の配列を返します。
Mapは、さらにオブジェクトを通じて繰り返すことができます。
第1引数arrayには、変換する配列を指定します
-
第2引数callbackには、各アイテムを処理する関数を指定します。 関数に渡される引数は、リストアイテムです。 関数は、いくつかの値を返すことができます。 文字列として表される「ラムダ形式」の関数は、動作しません。 これは、Adobe AIRとの互換性を強化するために、jQuery v.1.2.3で削除されました。
function callback(indexInArray, elementOfArray){
var replacementValue;
this; // unmapped
return replacementValue;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>ユーティリティ:配列とオブジェクト操作:jQuery.mapの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var arr = [ "a", "b", "c", "d", "e" ]
$("#res div").text(arr.join(", "));
arr = jQuery.map(arr, function(n, i){
return (n.toUpperCase() + i);
});
$("#res p").text(arr.join(", "));
arr = jQuery.map(arr, function (a) { return a + a; });
$("#res span").text(arr.join(", "));
});
</script>
<style type="text/css">
#res div { color:blue; }
#res p { color:green; margin:0; }
#res span { color:red; }
</style>
</head>
<body>
<div id="wrap">
<h1>ユーティリティ:配列とオブジェクト操作:jQuery.mapの使用例 | jQuery</h1>
<p>▼.map()の使用例</p>
<!-- CODE -->
<div id="res">
<div></div>
<p></p>
<span></span>
</div>
<!-- / CODE -->
</div>
</body>
</html>
jQuery.inArray(value, array)
配列の中に最初のパラメータのインデックス番号を定める(見つからない場合は-1)
2009/2/27
配列の中に指定した値があるかどうか調べます。 見つかった場合はインデックス番号を返し、見つからない場合は-1を返します。
第1引数valueには、配列の中に存在するかどうか調べる値を指定します
第2引数arrayには、valueに指定した値を調べる配列を指定します

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>ユーティリティ:配列とオブジェクト操作:jQuery.inArrayの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var ary=[4, "Pee", 8, "John"];
$("#res span:eq(0)").text($.inArray("John", ary));
$("#res span:eq(1)").text($.inArray(4, ary));
$("#res span:eq(2)").text($.inArray("David", ary));
});
</script>
<style type="text/css">
span { color:red; }
</style>
</head>
<body>
<div id="wrap">
<h1>ユーティリティ:配列とオブジェクト操作:jQuery.inArrayの使用例 | jQuery</h1>
<p>▼<code>ary=[4, "Pee", 8, "John"]</code>の中に、下記の値が存在するか調べます。</p>
<!-- CODE -->
<div id="res">
<div>"John" found at <span></span></div>
<div>4 found at <span></span></div>
<div>"David" found at <span></span></div>
</div>
<!-- / CODE -->
</div>
</body>
</html>
jQuery.merge(first, second)
2つの配列を結合する
2009/2/27
2つの配列を結合します。
1つ目の配列に2つ目の配列の要素を追加し、その2つ目の配列の要素が追加された1つ目の要素が戻り値になります。 戻り値の配列から重複する要素を削除したい場合は、$.unique()を使用してください。
第1引数firstには、追加された2番目の要素を結合する1つ目の配列を指定します
第2引数secondには、1つ目の配列に結合する配列を指定します。2つ目の配列は変化しません

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>ユーティリティ:配列とオブジェクト操作:jQuery.mergeの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var res=$.merge([0,1,2],[2,3,4]);
$("#res").html("$.merge([0,1,2],[2,3,4])の戻り値は「<span>"+res.join(",")+"</span>」です。");
var res2=$.merge([3,2,1], [4,3,2]);
$("#res2").html("$.merge([3,2,1], [4,3,2])の戻り値は「<span>"+res2.join(",")+"</span>」です。");
});
</script>
<style type="text/css">
span { color:red; }
</style>
</head>
<body>
<div id="wrap">
<h1>ユーティリティ:配列とオブジェクト操作:jQuery.mergeの使用例 | jQuery</h1>
<p>▼2つの配列を結合します。1つ目の配列は変更されます。</p>
<!-- CODE -->
<p id="res"></p>
<p id="res2"></p>
<!-- / CODE -->
</div>
</body>
</html>
jQuery.unique(array)
配列の要素から重複する要素をすべて削除
2009/2/27
配列の要素から重複している要素をすべて削除します。 これは、DOM要素の配列でのみ利用可能です。文字列や数値には利用できません。
第1引数arrayには、変換する要素の配列を指定します

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>ユーティリティ:配列とオブジェクト操作:jQuery.uniqueの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var divs=$("#sample div").get();
/* dupクラスの要素を3つ追加 */
divs=divs.concat($(".dup").get());
$("#sample div:eq(1)").text("重複削除前の要素数="+divs.length);
divs=$.unique(divs);
$("#sample div:eq(2)").text("重複削除後の要素数="+divs.length).css("color","red");
});
</script>
<style type="text/css">
#test div { color:blue; margin:2px; font-size:14px; }
#test span { color:red; }
</style>
</head>
<body>
<div id="wrap">
<h1>ユーティリティ:配列とオブジェクト操作:jQuery.uniqueの使用例 | jQuery</h1>
<p>▼div要素の配列からいくつかの重複している要素を削除します。</p>
<!-- CODE -->
<div id="sample">
<div>6つのdiv要素があります。</div>
<div></div>
<div class="dup"></div>
<div class="dup"></div>
<div class="dup"></div>
<div></div>
</div>
<!-- / CODE -->
</div>
</body>
</html>