メソッドチェーンを途切ることなく HTML タグを組み立てる jQuery Tag プラグイン

ホーム > Postal Search Ajax API with jQuery > DOM Manipulation

jQuery Tag プラグインは jQuery のメソッドチェーンを途切ることなく、HTML タグを組み立てるためのプラグインです。HTML タグの生成と追加をスタックで操作することで、メソッドチェーンを崩さずに HTML タグを組み立て続けることができます。

スタックの操作は jQuery 自体が持つスタックの仕組みを利用しています。jQuery は pushStack メソッドで現在のインスタンスをスタックに積み、end メソッドで直前のインスタンスに戻すことができます。

この特性を利用して、tag メソッドで HTML タグを生成して pushStack メソッドでスタックに積みます。gat メソッドで end メソッドでスタックから戻し、HTML タグを追加します。gat メソッドの名前は tag メソッドを逆に読んだものです。戻すや反対という意味を込めています。

また $.tag メソッドを使うと、スタックに積まずに HTML タグを生成できます。起点となる HTML タグを生成して組み立てるときに使えます。

ダウンロード

jquery.tag.js (Uncompressed only)

(function($) {
  
  // $.tag
  $.tag = function(name) {
    return jQuery('<' + name + ' />');
  };
  
  // tag
  $.fn.tag = function(name) {
    var self = this;
    return self.pushStack($.tag(name));
  };
  
  // gat
  $.fn.gat = function() {
    var self = this;
    return self.end().append(self);
  };
  
})(jQuery); // function($)

デモ

以下は div タグに a タグを追加する例です。tag メソッドで a タグを生成し、gat メソッドでその a タグを div タグに追加しています。

<div id="r1"></div>

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
  $('#r1')
    .tag('a')
      .attr('href', '/postal/')
      .text('Postal Search APIs & Solutions')
      .gat();
}); 
//]]>
</script>

以下は div タグに ul と li のリストタグ、さらに a タグを追加する例です。ul と li タグがスタックに積まれ、最終的に div タグまでさかのぼって追加されることになります。

<div id="r2"></div>

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
  $('#r2')
    .tag('ul')
      .tag('li')
        .tag('a')
          .attr('href', '/postal/digest.html')
          .text('Postal Search Ajax API ダイジェスト')
          .gat()
        .gat()
      .tag('li')
        .tag('a')
          .attr('href', '/postal/reference.html')
          .text('Postal Search Ajax API リファレンス')
          .gat()
        .gat()
      .gat()
//]]>
</script>

jQuery Tag プラグインは jQuery の振る舞いを理解する目的で作成したものですが、特定の場面でニーズがあるかもしれませんので公開します。ライセンスは jQuery と同じにしておきます。

メソッドチェーンを途切ることなく HTML タグを組み立てる jQuery Tag プラグイン

ダウンロード

デモ

関連情報