久しぶりに聞いたフレーズ。
document.querySelectorAllなどで取得したNodeListのループ処理。
何も考えずにArray.forEachしてましたが・・・対応してないのね・・・（汗
調べてみると結構あるみたいね。
いろんなやり方があるみたいだけど、再利用も考えて配列に変換。
var list = Array.prototype.slice.call( nodeList, 0 );
list.forEach( function(e){
console.log(e);
});
解決しました。
スタイルシートだけでテーブルに行番号を振る。の、メモ。
<table>
<thead>
<tr>
<th></th>
<th>見出し１</th>
<th>見出し２</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>値１−１</td>
<td>値１ー２</td>
</tr>
<tr>
<td></td>
<td>値２−１</td>
<td>値２ー２</td>
</tr>
<tr>
<td></td>
<td>値３−１</td>
<td>値４ー２</td>
</tr>
</tbody>
</table>
というHTMLがあったとする。
table{
counter-reset: rowCount;
}
tbody tr{
counter-increment: rowCount;
}
tbody tr td:first-child::before{
content: counter(rowCount);
}
２行目：カウンタをリセット（初期値として０を設定）する。
５行目：TR要素が出現するたびにカウンタの値を＋１する。
８行目：カウンタ値をcontentプロパティとして表示させる。
そこに、こういうCSSをあてると
| 見出し１ | 見出し２ | |
|---|---|---|
| 値１−１ | 値１ー２ | |
| 値２−１ | 値２ー２ | |
| 値３−１ | 値３ー２ |
と、きちんと行番号を振ってくれました。
ここ最近、クロージャやら、即時関数やらを多様するようになってきた。
が、初歩的なミスを犯してしまったので、戒めとしてメモ。
例）Aタグのマウスオーバー時の色の変更（スタイルシートでいいじゃないか・・は言わないで）
下記のようなコードがあったとしよう。
var anchors = document.getElementsByTagName('a');
for( var i = 0, len = anchors.length; i < len; i++ ){
var a = anchors[i];
a.onmouseover = function()
{
a.style.color = '#ff0000';
};
a.onmouseout = function()
{
a.style.color = '#000';
};
}
はい。これは問題なく動きます。
では、このコードを読み込み完了イベント内で書いてみると・・・
window.onload = function()
{
var anchors = document.getElementsByTagName('a');
for( var i = 0, len = anchors.length; i < len; i++ ){
var a = anchors[i];
a.onmouseover = function()
{
a.style.color = '#ff0000';
};
a.onmouseout = function()
{
a.style.color = '#000';
};
}
}
はい。失敗します。
これは、変数aはforループ内で都度初期化されているので、結果、最後に解釈されたAタグがonload内のローカル変数aの値となってしまいます。
結果は、ページ内どこのAタグをマウスオーバーしても、ページ内最後のAタグのみ色が変更されてしまうことになります。
そこでクロージャの登場です!!
window.onload = function()
{
var anchors = document.getElementsByTagName('a');
for( var i = 0, len = anchors.length; i < len; i++ ){
var a = anchors[i];
( function(e)
{
e.onmouseover = function()
{
e.style.color = '#ff0000';
};
e.onmouseout = function()
{
e.style.color = '#000';
};
})(a);
}
}
これで出来ました!!
何をしたかというと、forループ内に関数を作り、変数aをその関数内のローカル変数eへ渡してます。
このようにクロージャとは変数のスコープを切りたいときに利用したりできます。
JavaScriptを覚えるなら
 | 新品価格 |
知らなかったのでメモ。
親要素を取得する時
parent([条件])
$(obj).parent("div");
親要素がdivだったら親要素が取得できる。divじゃなければ空が返ってくる。
を使います・・・が、
さらに上の先祖要素には遡りたいとき
$(obj).parent().parent().parent("div");
と、かっこ悪い書き方をしてましたが、なんと!!
parents([条件])
parent()と違い親より上の先祖要素までさかのぼる。
$(obj).parents(".classname");
classnameというクラス名がついた先祖要素のみ取得
とか、
closest([条件])
最も近い先祖要素を取得
$(obj).closest("div");
間に他のタグがあっても無視して、一番近いdivを取得。
とか、あるみたい。
ドキュメントはちゃんと読まないとね!!
jQueryを覚えるなら
 | 新品価格 |
最寄りの駅を取得する方法を探していたら、こんな便利なWEBサービスと出会いました。
HeartRails Express | 路線／駅名／最寄駅データサービス
もちろん、きちんとAPIも提供されています。
使い道は至って簡単!!
最寄りの駅を調べたい対象となる緯度と軽度を渡すのみ!!
パラメータには
method には固定で getStations
x には最寄駅の情報を取得したい場所の経度
y には最寄駅の情報を取得したい場所の緯度
を渡します。
http://express.heartrails.com/api/json?method=getStations&x=135.191925&y=35.570042
すると、こんな感じで返ってきます。（サンプルはまたもや天橋立の最寄り駅をJSON形式で取得する）
{
"response": {
"station": [
{
"x": 135.195271,
"next": "傘松",
"prev": null,
"distance": "1510m",
"y": 35.583365,
"line": "天橋立鋼索鉄道",
"postal": "6292242",
"name": "府中",
"prefecture": "京都府"
},
{
"x": 135.182874,
"next": "岩滝口",
"prev": "宮津",
"distance": "1630m",
"y": 35.557375,
"line": "北近畿タンゴ鉄道宮津線",
"postal": "6260001",
"name": "天橋立",
"prefecture": "京都府"
},
{
"x": 135.195824,
"next": null,
"prev": "府中",
"distance": "1830m",
"y": 35.586202,
"line": "天橋立鋼索鉄道",
"postal": "6292242",
"name": "傘松",
"prefecture": "京都府"
}
]
}
}
返ってきた内容は
response 最寄駅の情報の一覧
station 最寄駅の情報（配列）
以下、各最寄り駅の情報
name 最寄駅名
prev 前の駅名（始発駅の場合は null）
next 次の駅名（終着駅の場合は null）
x 最寄駅の経度
y 最寄駅の緯度
distance 指定の場所から最寄駅までの距離（精度は10 ｍ）
postal 最寄駅の郵便番号
prefecture 最寄駅の存在する都道府県名
line 最寄駅の存在する路線名
とっても簡単に最寄り駅を取得できました。
この情報とGoogleMap APIを併用すると色々とできそうでうね♪
JavaScriptを覚えるなら
| 新品価格 |