Nakajiman Software Blog: Tag Plugin for jQuery 1.1.2

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

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

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

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

Download Tag Plugin for jQuery 1.1.2

/*
 * Tag Plugin for jQuery 1.1.2
 *
 * Copyright(C) 2007 LEARNING RESOURCE LAB.
 * http://postal-search-apis-and-solutions.blogspot.com/
 *
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 */
(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', 'http://developmentor.lrlab.to/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', 'http://developmentor.lrlab.to/postal/digest.html')
          .text('Postal Search Ajax API ダイジェスト')
          .gat()
        .gat()
      .tag('li')
        .tag('a')
          .attr('href', 'http://developmentor.lrlab.to/postal/reference.html')
          .text('Postal Search Ajax API リファレンス')
          .gat()
        .gat()
      .gat()
//]]>
</script>