jQuery APIリファレンスjQuery Core：jQueryオブジェクト操作
- each(callback)〔マッチした各要素に関数を毎回実行〕
- size()〔jQueryオブジェクト内の要素数を取得〕
- length〔jQueryオブジェクト内の要素数を取得〕
- selector ※v1.3～〔一番最初にjQuery()に渡されたセレクタ取得 〕
- context ※v1.3～〔一番最初にjQuery()に渡されたDOMノードを取得 〕
- eq(position)〔マッチした要素の中から指定したインデックス番号の要素を抽出〕
- get()〔マッチしたDOM要素すべてを取得〕
- get(index)〔マッチした要素の中から指定したインデックス番号のDOM要素を取得〕
- index(subuject)〔マッチした各要素のオブジェクト内におけるインデックス番号を取得 〕
each(callback)
マッチした各要素に関数を毎回実行
2009/2/27
each(callback) 戻り値：jQuery
マッチした各要素にcallbackに指定したコールバック関数を実行します。
関数内で要素を参照するには、「this」キーワードを使用します。 関数には実行時にマッチした要素集合における要素の位置（整数、0始まり）が引数として渡されます。
ループを抜けたい場合は、each関数内でFALSEを返します。 これは通常のループで「break」を使うのと似ています。 TRUEを返すと、次のループに移ります。 これは通常のループで「continue」を使うのと似ています。
第1引数callbackには、マッチした各要素に実行するコールバック関数を指定します。
function callback(要素集合における要素の位置, DOM要素) {
this; /* this == DOM要素 */
}
each()の使用例サンプルを見る
<!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 Core：jQueryオブジェクト操作：each関数の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("li").click(function () {
/*
function callback(インデックス, DOM要素) {
this; // this == DOM要素
}
*/
$("li").each(function(i){
this.style.color=(this.style.color!="blue") ? "blue" : "red";
});
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jQuery Core：jQueryオブジェクト操作：each関数の使用例 | jQuery</h1>
<p>▼3つのdiv要素に繰り返し、colorプロパティを設定します。</p>
<!-- CODE -->
<ul>
<li>クリックすると文字色が青⇔赤に変わります</li>
<li>クリックすると文字色が青⇔赤に変わります</li>
<li>クリックすると文字色が青⇔赤に変わります</li>
</ul>
<!-- CODE / -->
</div>
</body>
</html>
size()
jQueryオブジェクト内の要素数を取得
2009/2/27
size() 戻り値：数値
jQueryオブジェクト内の要素数を取得します。
lengthプロパティと同じ数値を返します。 size関数はlengthプロパティよりわずかに処理が遅いので、要素の数を取得するときは、lengthプロパティを使いましょう。
size()の使用例サンプルを見る
<!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 Core：jQueryオブジェクト操作：size()の使用例| jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(document.body).click(function(){
$("#sample").append($("<div>"));
var n=$("#sample div").size();
$("#res").html("<strong>"+n+"</strong>つのdiv要素があります。もっと追加するには青ボックスをクリックしてください。");
}).click();
});
</script>
<style type="text/css">
#sample div { width:50px; height:30px; margin:0 5px 5px 5px; float:left; background:blue; }
#res { color:red; }
</style>
</head>
<body>
<div id="wrap">
<h1>jQuery Core：$(...) jQuery関数：size()の使用例 | jQuery</h1>
<p>▼div要素をカウントします。div要素をもっと追加するには青ボックスをクリックしてください。</p>
<!-- CODE -->
<p id="res"></p>
<div id="sample" class="clearfix"></div>
<!-- CODE / -->
</div>
</body>
</html>
length
jQueryオブジェクト内の要素数を取得
2009/2/27
length 戻り値：数値
jQueryオブジェクト内の要素数（現在マッチした要素の数）を取得します。
lengthプロパティは、size関数と同じ値を返します。
lengthプロパティの使用例サンプルを見る
<!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 Core：jQueryオブジェクト操作：lengthプロパティの使用例| jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(document.body).click(function(){
$("#sample").append($("<div>"));
var n=$("#sample div").length;
$("#res").html("<strong>"+n+"</strong>つのdiv要素があります。もっと追加するには青ボックスをクリックしてください。");
}).click();
});
</script>
<style type="text/css">
#sample div { width:50px; height:30px; margin:0 5px 5px 5px; float:left; background:blue; }
#res { color:red; }
</style>
</head>
<body>
<div id="wrap">
<h1>jQuery Core：jQueryオブジェクト操作：lengthプロパティの使用例 | jQuery</h1>
<p>▼div要素をカウントします。div要素をもっと追加するには青ボックスをクリックしてください。</p>
<!-- CODE -->
<p id="res"></p>
<div id="sample" class="cf"></div>
<!-- CODE / -->
</div>
</body>
</html>
selector ※v1.3～
一番最初にjQuery()に渡されたセレクタ取得
2009/2/27
selector 戻り値：文字列
一番最初にjQuery()に渡されたセレクタを文字列として返します。
正確なクエリが使用されたことを決定するためにcontextと併用しましょう。 これらの2つのプロパティは、プラグイン開発者に有用です。
selectorの使用例サンプルを見る
<!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 Core：jQueryオブジェクト操作：selectorの使用例| jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul")
.append("<li>"+$("ul").selector+"</li>")
.append("<li>"+$("ul li").selector+"</li>")
.append("<li>"+$("div#foo ul:not([class])").selector+"</li>");
});
</script>
<style type="text/css">
li { color:red; }
</style>
</head>
<body>
<div id="wrap">
<h1>jQuery Core：$(...) jQuery関数：selectorの使用例 | jQuery</h1>
<p>▼使用したセレクタを決定します。</p>
<!-- CODE -->
Some selectors:<ul></ul>
<!-- CODE / -->
</div>
</body>
</html>
context ※v1.3～
一番最初にjQuery()に渡されたDOMノードを取得
2009/2/27
context 戻り値：要素
一番最初にjQuery()に渡されたDOMノードを返します。 何も渡されていない場合は、ドキュメントと同等になります。
正確なクエリが使用されたことを決定するためにselectorと併用しましょう。 これらの2つのプロパティは、プラグイン開発者に有用です。
contextの使用例サンプルを見る
<!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 Core：jQueryオブジェクト操作：contextの使用例| jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul")
.append("<li>"+$("ul").context+"</li>")
.append("<li>"+$("ul", document.body).context.nodeName+"</li>");
});
</script>
<style type="text/css">
li { color:red; }
</style>
</head>
<body>
<div id="wrap">
<h1>jQuery Core：$(...) jQuery関数：contextの使用例 | jQuery</h1>
<p>▼使用された正確なコンテキストを決定します。</p>
<!-- CODE -->
Some selectors:<ul></ul>
<!-- CODE / -->
</div>
</body>
</html>
eq(position)
マッチした要素の中から指定したインデックス番号の要素を抽出
2009/2/27
eq(position) 戻り値：jQuery
マッチした要素の中から指定したインデックス番号の要素を抽出します。 マッチした要素内における要素のインデックス番号は0始まりで、最後の要素のインデックス番号は「要素の長さ-1」になります。
第1引数positionには、抽出する要素のインデックス番号（0始まり）を数値で指定します。
eq()の使用例サンプルを見る
<!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 Core：jQueryオブジェクト操作：eq()の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/* 1つ目のli要素の文字色を赤色にする */
$("li").eq(0).css("color", "red")
/* 2つ目のli要素の文字色を青色にする */
$("li").eq(1).css("color", "blue")
/* 3つ目のli要素の文字色をオレンジ色にする */
$("li").eq(2).css("color", "orange")
/* 2番目の要素を選択し、文字を赤色にする */
$("#sample div").eq(1).css("color", "red");
});
</script>
</head>
<body>
<div id="wrap">
<h1>jQuery Core：jQueryオブジェクト操作：eq()の使用例 | jQuery</h1>
<!-- CODE -->
<p>▼クリックすると文字色が青⇔赤に変わります</p>
<ul>
<li>クリックすると文字色が青⇔赤に変わります</li>
<li>クリックすると文字色が青⇔赤に変わります</li>
<li>クリックすると文字色が青⇔赤に変わります</li>
</ul>
<br>
<p>▼2番目の要素を選択し、文字を赤色にします。</p>
<div id="sample">
<div>1番目の要素です。インデックス番号は0です。</div>
<div>2番目の要素です。インデックス番号は1です。</div>
</div>
<!-- CODE / -->
</div>
</body>
</html>
get()
マッチしたDOM要素すべてを取得
2009/2/27
get() 戻り値：配列＜要素＞
マッチしたDOM要素すべてを配列として取得します。
これはマッチした要素すべて（要素の配列など他のjQueryオブジェクト自身）にアクセスする後方互換性のある方法です。 jQuery関数を使わずに、DOM要素を操作したい時に便利です。
get()の使用例サンプルを見る
<!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 Core：jQueryオブジェクト操作：get()の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
function disp(elms, res){
var ary=[];
/* li要素の内容を配列に格納 */
for(var i=0; i<elms.length; i++){
ary.push(elms[i].innerHTML);
}
/* li要素の内容を「／」で連結して返す */
$("#"+res).text(ary.join("／")).css("color","red");
}
/* li要素をすべて取得 */
disp($("li").get(), "res");
/* li要素をすべて取得し、逆順にする */
disp($("li").get().reverse(), "res_reverse");
});
</script>
</head>
<body>
<div id="wrap">
<h1>jQuery Core：jQueryオブジェクト操作：get()の使用例 | jQuery</h1>
<p>▼ドキュメントの中にあるすべてのli要素の内容を配列に格納し、通常および逆順に配列を連結した文字列を表示します。</p>
<!-- CODE -->
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<p>通常に連結：<strong id="res"></strong></p>
<p>逆順に連結：<strong id="res_reverse"></strong> ※reverse()で逆順に</p>
<!-- CODE / -->
</div>
</body>
</html>
get(index)
マッチした要素の中から指定したインデックス番号のDOM要素を取得
2009/2/27
get(index) 戻り値：要素
マッチした要素の中から指定したインデックス番号のDOM要素を取得します。
実際のDOM要素を抽出するので、jQuery関数を使わずに、その要素を直接操作することができます。 この関数は、$(this).get(0)として呼ばれ、$(this)[0]のようにjQueryオブジェクト上で角括弧記法を使用する場合と同じ動作になります。
第1引数indexには、抽出する要素のインデックス番号（0始まり）を数値で指定します。
get(index)の使用例サンプルを見る
<!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 Core：jQueryオブジェクト操作：get(index)の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/* 画面上のクリックした要素名を取得 */
$("*",document.body).click(function(e){
e.stopPropagation();
var domEl = $(this).get(0);
$("#res:first").text(domEl.tagName).css("color","red");
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jQuery Core：jQueryオブジェクト操作：get()の使用例 | jQuery</h1>
<p>▼要素をクリックしてください。クリックした要素名を表示します。</p>
<!-- CODE -->
<p>クリックした要素名：<strong id="res"></strong></p>
<p><select><option>アイテム</option><option>アイテム</option><option>アイテム</option></select> <input type="text" value="テキスト入力欄" /> <button>ボタン</button></p>
<p><textarea cols="20" rows="2">テキストエリア</textarea></p>
<p><label for="r1"><input type="radio" id="r1" name="r" value="1" /> ラジオボタン</label> <label for="r2"><input type="radio" id="r2" name="r" value="2" /> ラジオボタン</label> <label for="c1"><input type="checkbox" id="c1" name="c1" value="1" /> チェックボックス</label> <label for="r2"><input type="checkbox" id="c1" name="c1" value="2" /> チェックボックス</label></p>
<!-- CODE / -->
</div>
</body>
</html>
index(subuject)
マッチした各要素のオブジェクト内におけるインデックス番号を取得
2009/2/27
index(subject) 戻り値：数値
オブジェクト内で、マッチした各要素を検索し、要素が見つかった場合はその要素のインデックス番号（0始まり)を返し、見つからなかった場合は「-1」を返します。 jQueryオブジェクトを指定した場合は、最初の要素のみ検索されます。
第1引数subjectには検索する要素またはjQueryオブジェクトを指定します。
index(subject)の使用例サンプルを見る
<!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 Core：jQueryオブジェクト操作：index(subject)の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("li").click(function () {
var index=$("li").index(this);
$("#res").text(""+index+"").css("color","red");
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>jQuery Core：jQueryオブジェクト操作：index(subject)の使用例 | jQuery</h1>
<p>▼クリックすると、クリックした要素のページ内におけるインデックス番号（0始まり）を返します。</p>
<!-- CODE -->
<p>クリックしたアイテムのインデックス番号：<strong id="res"></strong></p>
<ul>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
<li>アイテム4</li>
<li>アイテム5</li>
</ul>
<!-- CODE / -->
</div>
</body>
</html>