jQuery Mobileではidが鬼門

最近jQuery Mobileを触ることが多く、ちょこちょこハマりどころがあったのでメモしておく。

jQuery Mobileはリンクを遷移したときにハッシュ（URLの#以降の文字列）ごとにdata-role="page"な要素をAjaxで取得して既存のDOMツリーに追加する。

このため検索結果のページを行き来した場合などに、ハッシュが異なるにも関わらず元になるHTMLのテンプレートが同一なためにid属性値が重複してDOMツリー上に出現することがある。 こうなるとid属性値ではユニークな要素を指定することができず、それを前提としたDOM操作がまともに動作しなくなる。 そういうわけで、jQuery Mobileではid属性を使うことが結構鬼門だったりする。

代替手段としては、現在アクティブになっているpageのclass属性にui-page-activeが設定されることを利用して、これとユニークで指定したい要素に付与したclass属性値とのペアで指定する方法がある。

HTML：

<div data-role="page">
  <div data-role="content">
    <p class="hello">I'm unique in this page!</p>
  </div>
</div>

jQuery：

var p = $(".ui-page-active .hello:first"); // 上述のp要素のjQueryオブジェクトを取得
console.log(p.html); // => I'm unique in this page!
p[0]; // => HTMLParagraphElement（p要素のDOMオブジェクトを取得）

こんなような、ユニークの要素を指定して処理をすることがよくあるんだけど、毎回毎回ui-page-activeとか書くのは面倒くさい。結構大きなハマりポイントだと思うけど、なにか簡単なAPIとかないのかな？