この前ちょっと聞かれたので、メモっときます。

AjaxでJS含んだページをそのままロードするとDOMに追加した時点で実行しよるんで、それを回避するためのやつです。Autopagerizeを参考にしたと思います。

ついでに取得したHTMLの走査方法ですが、そのまま$(html)とかにすると、一番上のwrapperとかそういうdivだったりする要素が取得できないので、一旦divをかませておきます。

Ajax部分のソースコード

$.ajax({
  url: "hoge.html",
  type: "GET",
  success: function(html) {
    // 文字列で取得したデータを整理する
    html = html.replace(/<script(?:[ \t\r\n][^>]*)?>[\S\s]*?<\/script[ \t\r\n]*>|<\/?(?:i?frame|html|script|object)(?:[ \t\r\n][^<>]*)?>/gi, "");
    var _div = $("<div>" + html + "</div>");
    // 取得したHTMLの走査は_div.find("a")のようにする
    // hogehoge
  }
});

コピペ用

html = html.replace(/<script(?:[ \t\r\n][^>]*)?>[\S\s]*?<\/script[ \t\r\n]*>|<\/?(?:i?frame|html|script|object)(?:[ \t\r\n][^<>]*)?>/gi, "");

よくわからんと思いますけど、サンプルを見ればなんとなく伝わるような。。
指定した要素のブラウザがその時表示している位置を以下のテーブルの数値で返します。

┏━┳━┳━┓
┃０┃１┃２┃
┣━╋━╋━┫
┃３┃４┃５┃
┣━╋━╋━┫
┃６┃７┃８┃
┗━┻━┻━┛

m5GetElementPosのサンプル

返す数値は、実際returnで返ってくるわけじゃないんです。指定した要素にjQuery.dataで”ElementPos”というプロパティに書きこんでます。

ダウンロード

ダウンロードはgithubからどぞー

使い方とかをざっくりと

こんな感じで取れます。

$(target)
  .m5GetElementPos()
  .click(function() {
    alert($.data($(this), "ElementPos"));
    return false;
  });

または、コールバックでも使えます。

$(target).click(function() {
  $(this).m5GetElementPos({
    returnNumber: false,
    callback: function() {
      alert($.data(this, "ElementPos"));
    }
  });
  return false;
});

コールバック関数ではcallback.callしているので、thisはm5GetElementPosを実行した要素になります。

オプション

returnNumber	数値で返すか、文字で返すか。デフォルトは数値でtrue
returnCancel	falseを指定するとthisを返さないので、メソッドチェーンができなくなります
callback	コールバック関数

そんな感じで

バグとかあれば教えてください

jQselectableにdisabled・enabledメソッドを追加しました。
ただし利用できるのは、対象selectable要素ひとつに対してです。複数個ある場合、任意に指定して利用します。

Read more

色々オプション付けてもいいけど、とりあえず公開時は全部とったろーと思いまして。最小構成のイメージビューアなjQueryプラグインです。その場でチラッと見せたいときに使えるかも。

高機能なやつは探せばいくらでも出ると思うので、たくさん機能ほしい人はそっち使えばいいと思います。

サンプル

Read more

jQuery("div:unkomorimori").css("background", "#89640d");

「:unkomorimori」っていうセレクタを作ってみようっていうそういう話です。簡単です。まあunkomorimoriなんてふざけたセレクタなんで、きっと中身はunkoでいっぱいなんでしょう。

結局やってることってfilterと同じような感じなんですけど

<div>
  <p>うんこうんこうんこうんこうんこうんこ</p>
</div>
<div>
  <p>うんこ</p>
</div>
<div>
  <p>うんこうんこ</p>
</div>
<div>
  <p>うんこ</p>
</div>

なんかうんこって書いてあるdivがたくさんありました、と。後から気づいたんですけど、これdiv要らないですね。pだけでいい・・・でJSとしてはセレクタの記述をのぞけば

jQuery("div:unkomorimori").css("background", "#89640d");

これだけです。:unkomorimoriの基準は対象要素内で「うんこ」が3回以上出てくるかどうかです。出てきた要素だけを返します。ちなみにfilterでやった場合はこんな感じ。

カスタムセレクタを使う利点は、何回も同じfilter書くときとか、めんどいんでじゃあセレクタでやりましょうか、ってなる感じですね。気をつけないといけないのは、今回の書き方は全てのdiv要素の中身を文字列で取得した上で、正規表現使って「うんこ」を探してるんですけど、処理的にはうんこだけにくそ重いっていう点ですね。うまく落ちたところで、あ、うんこだけに落ちたところで、この辺で。