テストとjQueryのeachっぽい何かを書いてみた

jQueryは便利だけど、わざわざjQueryをロードせずともできるだけ同じようなことがしたいというときに便利。jQueryほどセレクタの指定ができないが、forEachでぐるぐると実行してくれるので便利。おまけにテストも書いてみました。

使う場面としたら、Chrome拡張やブックマークレットくらいでしょうか。

<script>
/* スクリプト
-------------------------------------------------------------------------------*/
var tags, classes, id;
(function(){ var a = function(o){return Array.prototype.slice.apply(o)}, d = document, g = function(t){return d.getElementsByTagName(t)}; tags = function(t, f, h) { var c = 0; a((h == undefined ? g(t) : h.getElementsByTagName(t))).forEach(function(h) { f.call(h, c); c++; }); }; classes = function(l, f, h) { var o = 0; a((h == undefined ? g("*") : h.getElementsByTagName("*"))).forEach(function(h) { var c = h.className.split(" "); for (var i = 0; i < c.length; i++) { if (c[i] == l) { f.call(h, o); o++; break; } }; }); }; id = function(i, f) { f.call(d.getElementById(i)); };
}).call(this);
/* テストスクリプト
-------------------------------------------------------------------------------*/
var testResult = "";
var print = function(_print) { testResult += _print;
};
var testData = function() { document.write(new Array(100).join("-")+"<br/>"); document.write("テストデータ<br/>"); document.write(new Array(100).join("-")+"<br/><br/>");
};
var testLog = function(){ document.write("<br/><br/>"); document.write(new Array(100).join("-")+"<br/>"); document.write("テスト結果<br/>"); document.write(new Array(100).join("-")+"<br/>"); document.write(testResult);
};
var suite = function(_suite) { print("<br/>■ "+_suite+"<br/>");
};
var test = function(_name){ var result = 1; for (var i = 1; i < arguments.length; i++) { if (typeof(arguments[i]) == "function") { try { result = result && arguments[i](); } catch (_error) { result = 0; throw (_error); } break; } }; print((result ? "○" : "×")+" "); print(_name); print("<br/>");
};
testData();
</script>
<!-- テスト用データ
=============================================================================== -->
<meta charset="UTF-8">
<div>hoge</div>
<div class="hoge">hoge</div>
<div>hoge</div>
<div id="fufu">hoge</div>
<div class="hage hoge test"> <span>aaa</span> <span>aaa</span> <span>aaa</span> <span>aaa</span>
</div>
<div class="test"> <span>bbb</span> <span>bbb</span> <span>bbb</span> <span class="test">bbb</span> <span class="test">bbb</span> <span>bbb</span> <span>bbb</span>
</div>
<script>
/* テスト実行
-------------------------------------------------------------------------------*/
suite("tags");
test("ちゃんとtagsが実行された", function(){ var count = 0; tags("div", function(){ count++; }); return count == 6;
});
test("インデックスが一致している", function(){ var count = 0; var flag = 1; tags("div", function(i){ count++; if (count == i) { flag = 0; } }); return flag;
});
test("二階層目のspanを取得できる", function(){ var count = 0; tags("div", function(i){ if (i == 5) { tags("span", function() { count++; }, this); } }); return count == 7;
});
suite("classes");
test("classesが実行できた", function(){ var count = 0; classes("hoge", function(){ count++; }); return count == 2;
});
test("インデックスが一致している", function(){ var count = 0; var flag = 1; classes("hoge", function(i){ count++; if (count == i) { flag = 0; } }); return flag;
});
test("カウンタが数値である", function(){ var flag = 1; classes("hoge", function(i){ if (typeof(i) != "number") { flag = 0; } }); return flag;
});
test("二階層目のclassを取得できている", function(){ var count = 0; classes("test", function(i){ if (i == 1) { console.log(this); classes("test", function() { console.log(this); count++; }, this); } }); return count == 2;
});
suite("id");
test("idが実行できた", function(){ var count = 0; id("fufu", function(){ count++; }); return count == 1;
});
/* テスト結果出力
-------------------------------------------------------------------------------*/
testLog();
</script>

こんなかんじでブックマークレットも作れる

var tags,classes,id;(function(){var a=function(o){return Array.prototype.slice.apply(o)},d=document,g=function(t){return d.getElementsByTagName(t)};tags=function(t,f,h){var c=0;a(h==undefined?g(t):h.getElementsByTagName(t)).forEach(function(h){f.call(h,c);c++})};classes=function(l,f,h){var o=0;a(h==undefined?g("*"):h.getElementsByTagName("*")).forEach(function(h){var c=h.className.split(" ");for(var i=0;i<c.length;i++)if(c[i]==l){f.call(h,o);o++;break}})};id=function(i,f){f.call(d.getElementById(i))}}).call(this);
tags("td",function(){var that=this;tags("a",function(){if(this.innerHTML.indexOf("\u4ed9\u53f0")+1)that.style.background="orange"},this)});