jQuery Zen Coding Plugin を作ってみました。Zen Coding の書式から jQuery オブジェクトを作る感じのやつです。

とりあえずソースとかは http://sakuratan.biz/jquery/zencoding/ に置いてます。オリジナルの Zen Coding と同じで MIT ライセンスです。

使い方

var obj = $.zenCoding('div#page>div.logo+ul#navigation>li*5>a');

で、Zen Coding を展開した jQuery オブジェクトを返します。上の例ですと、

<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
  </ul>
</div>

の構造を持った jQuery オブジェクトが返ってきます。jQuery オブジェクトってのは $(‘#id’) とか呼び出した時に返ってくるやつのことす。$.zenCoding の戻り値を他の jQuery オブジェクトにそのまま引っ付けることができるって意味す。

var obj = $.zenCoding('div#page>div.logo+ul#navigation>li*5>a');
$('#replace').append(obj);

$('#replace').zenCoding('div#page>div.logo+ul#navigation>li*5>a');

alert($.zenCoding('div#page>div.logo+ul#navigation>li*5>a',
      { resultType: 'text' }));

ほかの例

もう少しややこしい感じのですと、ツイッターのタイムラインに埋め込むツイート部分を Zen Coding で書くとこんな感じになります。面倒くさくなってきたので ul の中身省略してます、サーセンw

$.zenCoding('li.status>(span.thumb.vcard.author>a.tweet-url>img)+(span.status-body>(span.status-content>(strong+span.entry-content))+span.meta.entry-meta>(a.entry-data+span))+ul.actions-hover+ul.meta-data.clearfix');

で、できあがるのはこんな感じの HTML。

<li class="status">
  <span class="thumb vcard author">
    <a class="tweet-url"><img src="" alt=""></a>
  </span>
  <span class="status-body">
    <span class="status-content">
      <strong></strong>
      <span class="entry-content"></span>
    </span>
    <span class="meta entry-meta">
      <a class="entry-data"></a>
      <span></span>
    </span>
  </span>
  <ul class="actions-hover"></ul>
  <ul class="meta-data clearfix"></ul>
</li>

元の Zen Coding が長ったらしいんでかえってややこしい気がしますwww
という感じですので、もうちょい小分けに使った方がよろしいんでは無いでしょうか。