ないけど、なくても困らない。 insertBeforeでできる。 parentElement.insertBefore(newElement, targetElement.nextSibling) targetElement の後ろに newElement を入れたかったらこれで済む。 targetElement がparentElementの最後の子要素（lastChild）だったとしても、 targetElement.nextSibling は null となり、 parentElement.insertBefore(newElement, null) は末尾に追加なので、万事OK。 安易に insertAfter() を作らなかったことを評価したい。

よく見かけるので、メモ。 function unique(array) { var storage = {}; var uniqueArray = []; var i,value; for ( i=0; i<array.length; i++) { value = array[i]; if (!(value in storage)) { storage[value] = true; uniqueArray.push(value); } } return uniqueArray; } JavascriptのArrayオブジェクトに、配列の重複を取り除くメソッドはないので、作るしかないらしい。 jQuery.unique などが、名前から期待できそうな感じだが、これはDOM要素の配列の重複を除去してくれるものであって、配列に対しては使えない。

問題 以下のような、日付と時間を入力するタイプの日時入力欄が入力しにくい。 YYYY-MM-DD hh:mm:ss形式で入力してもらえると楽なのはプログラマの都合。ユーザーには優しくない。 下図のような入力欄にしたい。 しかし、プログラム上は「日時」で管理されている項目なので、画面上は「日+時」になると、「日時」を分割したり、「日+時」を結合したりが面倒だ。 表面上はユーザーに優しいインターフェース、内部的にはプログラマに優しい処理をおこないたい。 答え 日時の入力欄を、後の処理はしやすいままで、入力しやすくするjQueryプラグインを作ってみる。 HTMLは以下のようにするだけ。 HTML <input type="text" class="datetimepicker" name="entry_datetime" value="2012-11-01 12:30:00"> JavaScr

問題 jquery.ui の autocomplete で、日本語入力が未確定の状態でも候補が表示されてしまい、邪魔だといわれました。 日本語入力中は候補を出さないで、日本語入力が確定してからautocompleteできないでしょうか。 http://jqueryui.com/autocomplete/ 答え DEMO まず普通のautocomplete （「あ」「か」など入力してみてください） 昔のjquery ui なら、以下のようにすれば、未確定中に候補を出さないようにできた。 //昔はこんなことをした例。今はダメ。 $('#hoge').autocomplete({ （略） search: function(event, ui) { //firefoxは未確定中にキーイベントが発生しない //firefox以外は未確定中のキーイベントのkeyCodeが229になるのでこれでキャンセ

対象がこれらのブラウザならば、これだけでハッシュの変化を監視できる。 JavaScript $(function(){ $(window).on('hashchange', function(){ alert(location.hash); }); }); Demo #test1 #test2 #test3 #test4 #test5 もしhashchangeイベントに対応していないブラウザでもハッシュの監視をしようと思ったら、タイマー監視してイベントを発火させる感じになるでしょうか。 if ("onhashchange" in window) { //この場合はhashchangeイベントをサポートしているので何もしなくてよい } else { //hashchangeイベントをサポートしていない場合だけ特別に、0.1秒ごとにハッシュを見る処理を追加する $(function(){ va

問題 Bootstrapを使っているのですが、日付選択UIはやっぱりjqueryuiのdatepickerを使うしかないでしょうか…… jqueriy.ui.datepicker はいいと思うんだけど、読み込まないといけないファイルが増えたり、見た目の統一感が問題だったり…… こんなのがいい！ けど、こうなっちゃう 答え jquery.ui.datepicker.jsをちょっといじくると、BootstrapのCSSを適用できて、Bootstrapっぽいdatepickerができる。 jquery.ui.datepickerのJavaScriptは完成度が高いので、そのまま使うとして、見た目はjqueryuiのCSSに頼らないようにする。 jquery.ui.datepicker.jsではカレンダー部分のHTMLを作っている_generateHTMLというメソッドや、作ったHTMLを適用・調

問題 文字列を数値にするには？（「”5″」を「5」にするなど） 答え 「単項 + 演算子」が簡単。 見慣れないと奇妙だけど、一般に高速で、記述もコンパクト。 +"5" → 5 +"-123" → -123 +"abc" → NaN +"12ab" → NaN +"123 abc" → NaN +"-123.456" → -123.456 +"" → 0 +true → 1 +false → 0 +undefined → NaN +null → 0 +[] → 0 （[]→""と評価された後に+""しているので0になる） +[8] → 8 +[8,9] → NaN +{} → NaN +{"valueOf":function(){return 123;}} → 123 +{"toString":function(){return "-987";}} → -987 もうちょっと詳しく 仕様は以

問題 jQueryプラグインとか無しで、回転できる？ 答え 回転します。 jQueryプラグイン無しで、回転します！ jQueryのanimateは、数値で設定できるスタイルシートのプロパティでしかアニメーションできない。 それならば、表示に影響しないz-indexなどのプロパティを利用して、値の変化を発生させ、stepオプションでそれを横から利用して回転などのプロパティの指定に使ってはどうかというアイデアで作ってみました。 //ここでは表示に影響しないz-indexをアニメーションさせます（見た目には何も起きません） $('#sample20130314').animate({zIndex:1},{ //1秒かけてアニメーション duration:1000, //stepは、アニメーションが進むたびに呼ばれる step:function(now){ //nowに現在のz-indexの値（

株式会社ソフテル 〒501-0112 岐阜市鏡島精華1-3-17 岐陽第一ビル TEL:058-254-8500（10:00〜17:00） FAX:058-254-8505

問題 JavaScriptで、ランダムな文字列を簡単に作るには。 解答例 こんな方法がある。 Math.random().toString(36).slice(-8); Math.random() でランダムな数値ができる（例: 0.5914055700523515） Math.random().toString(36) で、よくあるブラウザでは36進数になる（0-9a-zの36文字で表現）（例: “0.xf3d86djs5o”） Math.random().toString(36).slice(-8) で、後ろから8文字を使う（例: “d86djs5o”） → 以前はOperaでは動きが少し違ったようだが、今は他のブラウザと同じように動くようだ（Opera11で確認）。 参考 Math.random().toString(36).slice(-8) で簡易パスワード生成。 — TOYAM

問題 JavaScriptでのタブ切り替えと、Google Maps の地図の表示を組み合わせた画面を作っています（Google Maps APIを使ってます）。 非表示のタブに地図の表示をしようとすると、タブを選択したときの地図の表示がおかしいです。 どうするとちゃんと表示されるでしょうか。 答え 初期化時点で地図のコンテナとなるdiv要素が非表示だと、コンテナの大きさが取得できないのか、何かがうまくいかないらしい。 対策はいくつか考えられる。 タブをクリックしたときに初期化処理をする方式 何かおかしくても初期化だけはしておいて、タブをクリックされたときに再描画を依頼する方式。 display:none; ではなくて、別の方法で隠すと大丈夫だったりするらしい（未確認） タブをクリックしたときに初期化処理をする方式 タブがクリックされて地図のコンテナのdiv要素が表示状態になってから、初期

問題 IEかどうかを判別しようと思って以下のようにして、「その要素があればIEだ！」という判定をしていたのですが、IE10でできないみたい。どうしよう？ <!--[if IE]><div id="ie_dayo"></div><![endif]--> 答え IE10からはHTML内の条件分岐コメントが使えなくなった（標準モードのとき無視される）。 JavaScriptの方では、どうしてもIEかどうかで動きを変えざるを得ない場合があれば、以下の方法で。 //単純にIEでないならfalse、IEならtrue var is_ie = false; /*@cc_on is_ie = true; @*/ もう少し細かくすると、 //IEでないならfalse、IEならバージョンを取得 var is_ie = false; /*@cc_on @if (@_jscript_version == 10) i

問題 $(document).ready() と $(window).load() は何か違うの？ 答え 違う。 readyはDOMが構築されたら実行される。 $(document).ready(function() { // Handler for .ready() called. }); これは次のよく見かける省略形と同じ。 $(function() { // Handler for .ready() called. }); loadは、使用される画像など含めて、ページが完全に読み込まれたら関数が実行される。 $(window).load(function () { // run code }); そのため $(document).ready(function() { // 画面にある画像の大きさを取得したいよ　→　できません× }); $(window).load(function(

戻り値は変化率とでもいえばよいだろうか。 一番簡単な、進捗に正比例して変化する例 こんな変化をさせる場合。横軸が時間（0～1）、縦軸が値の変化。 これでよい。 jQuery.easing.myEasing = function(x, t, b, c, d) { return x; } 進捗率＝変化率で、進捗0なら変化も0、進捗1（100%）なら変化も1（100%）。 最初ゆっくり、後から加速の、二次関数を使った例 こんな変化をさせる場合。物が落下するときの感じの変化。 jQuery.easing.myEasing2 = function(x, t, b, c, d) { return x * x; } あら？なんだかとても簡単そうな感じがしてきましたか？ 変化のある動きをさせる例 こういうのはどうでしょう。 jQuery.easing.myEasing3 = function(x, t,

リストで、あまりに長くなって邪魔な場合があると思います。 例えば、WorPressの年月日のアーカイブの一覧が、3年ぐらいたつと36個もできてしまう。 普段は上10個ぐらいあれば十分。でも件数制限して画面から消してしまうのはなんだかもったいない。 そこで、下図のようなことをしてみます。 スクリプトが動くPCなどの環境ではリストがコンパクトになり、スクリプトが動かない環境では通常通りの表示をします。 JavaScript $(function(){ $("#list").each(function(){ $(this).find("li:gt(10)").each(function(){$(this).hide();}); $(this).append('<p>» もっと見る</p>'); $(this).find("p:last").click(function(){$(this).par

問題 inって演算子なんですか。 答え in単体だと演算子です（for-inのはそういう”構文”）。 あまり見かけないけど、こういう書き方ができる。 Example if ("xxx" in obj) { //obj に xxx プロパティがあるとき //... } Example ("xxx" in obj) ? alert('obj.xxx あり') : alert('obj.xxx なし'); ただ、以下の書き方でだいたい事足りるので、あまり使われない。 if (obj.xxx) { //... } 「プロパティが存在するかどうか」と、「プロパティの値が真かどうか」という意味合いの違いはある。 /** * 準備 */ var o = {}; o.aaa = 123; o.bbb = null; o.ccc = undefined; /** * test 1 : プロパティがあって値が

日付入力、カレンダー入力をしたいときは jquery.ui.datepicker.js。 では、年月入力ができる機能が欲しいときはどうしましょう。 → jquery.ui.ympicker.js デモ 今回は、jquery.ui.datepicker.jsを 改造して作る例をご紹介します。 元が jquery.ui.datepicker.js なので、オプションなどもほぼそのまま、動きもだいたい似ています。 名づけて jquery.ui.ympicker.js。 以下、調理方法です。 １、材料 jqueryuiのダウンロードページから一式ダウンロードする。 ダウンロードしたzipファイルを解凍し、中身から、開発用の元のソース（development-bundle/ui/jquery.ui.datepicker.js）を使う。 ２、名前を変更する お好みの名前にしていただいてよいですが、ここ

フォームのリセットといえばこれ。 <input type="reset" value="リセット" /> しかしこれは各フォームのデフォルト値に戻すだけで、もともと何か値を持っていた場合、空欄の状態にはなりません。 （とあるフォームにて） そこでjQueryで各フォームを空欄・未選択にできるような処理を書いてみます。 その際、hiddenだけは空欄にしないようにしてみます。 $(".clearForm").bind("click", function(){ $(this.form).find("textarea, :text, select").val("").end().find(":checked").prop("checked", false); }); こんな感じになります。 DEMO ラジオボタン が選択されていても。 なにかチェックされていても。 テキストエリアでも。

jQuery1.7から、.bind()、.live()、.delegate()などは非推奨となり、.on() が推奨となりました。今後すべてのイベントは .on() で、となっていきそうですが、なにやら引数が多くて分かりにくい感じ？では使ってみましょう。 １、$(セレクタ).on(イベント, 関数) セレクタにマッチした要素で、イベントが発生すると、関数が実行されます。 = .bind() ですね。 「セレクタにマッチした要素に」なので、そこにある要素に対してとなり、後から動的に追加した要素に対しては効きません。 example $('#example-button').on('click', function(){alert('clicked!');}); Demo デモ – $(セレクタ).on(イベント, 関数) ２、$(document).on(イベント, セレクタ, 関数) do

ページの下までスクロールしたときに何らかの処理を実行する例 $(window).bind("scroll", function() { scrollHeight = $(document).height(); scrollPosition = $(window).height() + $(window).scrollTop(); if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) { //スクロールの位置が下部5%の範囲に来た場合 } else { //それ以外のスクロールの位置の場合 } }); demo ページをある程度下までスクロールしたときに何らかの処理を実行する – デモ 「本当にぴったり最下部までスクロールしたら」という条件にすることも可能ですが、ある程度範囲を持たせておいた方がよいことが多いでしょう。 条件