今回は EACH。普通にプログラミング言語的には、あの each ？って感じですがどうでしょう？
とりあえず書いてみたコードが以下。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryを始めてみる</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("span").click(function () {
$("div").each(function(){
$(this).toggleClass("example");
});
});
});
</script>
<style>
div.example { background-color:blue; }
</style>
</head>
<body>
<span>Click here...</span>
<div>number 1</div><br>
<div>number 2</div><br>
<div>number 3</div>
</body>
</html>
クリックすると全<div>タグの背景が青くなります。
これってループしてるんですかね？
each ならループしてるって前提なんですが・・・（私的には）
そこで
クリックすると全<div>タグの背景が青くなります。
これってループしてるんですかね？
each ならループしてるって前提なんですが・・・（私的には）
そこで
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryを始めてみる</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var i=0;
$(function(){
$("span").click(function () {
$('div').each(function(i) {
alert(i);
i++;
});
});
});
</script>
<style>
div.example { background-color:blue; }
</style>
</head>
<body>
<span>Click here...</span>
<div>number 1</div><br>
<div>number 2</div><br>
<div>number 3</div>
</body>
</html>
としてみた。
単純に<div>タグの数だけ alert(番号(0～2)) が表示されましたので、ループしてるんでしょうね。
この時のキーって何になるんだろ？そしてキーって取れるんだろうか？
そこで、サンプル２を見てみると・・・
としてみた。
単純に<div>タグの数だけ alert(番号(0～2)) が表示されましたので、ループしてるんでしょうね。
この時のキーって何になるんだろ？そしてキーって取れるんだろうか？
そこで、サンプル２を見てみると・・・
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
});
});
ってのがあるんだけど、なんじゃこりゃ？？？
eachの後ろのfunctionがパラメータを２つ取ってますが、これって誰が何を渡してるの？
動きと合わせて読んでみると、どうやら、index は繰上げ数、domEleはＤＯＭエレメントのことのようです。
それを確かめるために、以下のコードを書いてみた。
ってのがあるんだけど、なんじゃこりゃ？？？
eachの後ろのfunctionがパラメータを２つ取ってますが、これって誰が何を渡してるの？
動きと合わせて読んでみると、どうやら、index は繰上げ数、domEleはＤＯＭエレメントのことのようです。
それを確かめるために、以下のコードを書いてみた。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryを始めてみる</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("span").click(function () {
$('div').each(function(index,domEle) {
$(domEle).css("backgroundColor", "yellow");
alert(index);
});
});
});
</script>
<style>
div.example { background-color:blue; }
</style>
</head>
<body>
<span>Click here...</span>
<div>number 1</div><br>
<div>number 2</div><br>
<div>number 3</div>
</body>
</html>
さっきまでは, var i=0 としてから i をインクリメントしながらアラートたんだけど、今回のは単に index をアラートしてる。
果たして同じように 0, 1, 2 と順にアラートが出てきた。
また、アラートが出る前に、対象ＤＯＭエレメントの背景が黄色になっていることも確認できた。
補足：toggleClass() は、括弧内のcssセレクタが対象エレメントにおいて、ＯＮならＯＦＦにＯＦＦならＯＮにする命令だった。
（用語の使い方は合っているのだろうか？）
さっきまでは, var i=0 としてから i をインクリメントしながらアラートたんだけど、今回のは単に index をアラートしてる。
果たして同じように 0, 1, 2 と順にアラートが出てきた。
また、アラートが出る前に、対象ＤＯＭエレメントの背景が黄色になっていることも確認できた。
補足：toggleClass() は、括弧内のcssセレクタが対象エレメントにおいて、ＯＮならＯＦＦにＯＦＦならＯＮにする命令だった。
（用語の使い方は合っているのだろうか？）