memorandum
thinking about creation

jQueryのclone()を使ったサンプル

Entry Date _ 2020.02.07
/
ModifiedDate _ 2020.02.07

jQueryのclone()の動作確認がてら、簡単な掲示板のような機能を実装したい時に役立つかもしれない関数をつくってみました。

clone()は、指定された要素をそっくりそのままクローン(複製)します。その時、クローンする要素のイベントを生かすか殺すかも指定できます。

$要素.clone(false); // イベントをコピーしない
$要素.clone(true); // イベントをコピーする

サンプルではテンプレート・エンジンを使わず、HTMLのブロックをそのままクローン(複製)することによって、簡単な掲示板のような機能を実現しています。また、クローンする時にブロック内の様々な要素を変更しています。

まずは、サンプルをご覧ください。
[クローン]というボタンを押すと、ブロックがどんどん下に追加されていくのがわかると思います。

つくった関数は以下になります。

var clone_blocks = function(_set){
    var $space = $(_set.space);
    var $block = $(_set.block + '[data-no="0"]', $space);
    var maxno  = Number($block.attr('data-maxno')) + 1;
    $block.attr('data-maxno', maxno);

    // クローン
    var $clone_block = $block.clone(false);
    $clone_block.removeAttr('data-maxno');
    $clone_block.attr('data-no', maxno);

    // 値の変更
    _set.item.forEach(function(_arr){

        var attr     = _arr[0];
        var selector = _arr[1];

        // {{:count}}をmaxnoに置換
        var value    = _arr[2].replace(new RegExp('{{:count}}', 'g'), maxno);

        var $target = $(selector, $clone_block);
        if (attr == 'html'){

            // HTMLを変更する
            $target.html(value);

        }else if (attr == 'css'){

            // CSSを変更する
            var _css ={};
            value = value.replace(/[\"\'' ]/g,""); // コーテーションとスペースを削除
            value.split(',').forEach(function(val){
                var _val = val.split(':');
                _css[_val[0]] = _val[1];
            });
            $target.css(_css);

        }else{

            // 属性を変更する
            $target.attr(attr, value);

        }
    });

    // 出力
    $space.append($clone_block);

    return maxno;
}

使い方は、まず以下のようなHTMLを用意します。
data-no="0" data-maxno="0"」は必ず必要なので、このまま入れてください。

そして関数「clone_blocks」に以下のように指定して叩くことで、指定した要素がクローンされていきます。

追加された番号 = clone_blocks({
    'space': '親セレクタ',
    'block': 'ブロック・セレクタ',
    'item':[
        ['属性', 'セレクタ', '値'],
        ['属性', 'セレクタ', '値']
    ]
});

クローンされたブロックは「data-no="*"」に連番が代入されます。サンプルでは、その連番をつかって画像と、画像名、画像名のバックグラウンドを、クローンの度に変更しています。

block(ブロック・セレクタ)」で指定されたDOMをクローン(複製)して、itemの配列の指定で書き換えて、「space(親セレクタ)」にappendしていきます(blockは、spaceの中にある必要があります)。

itemの属性に「html」を指定すると、セレクタのhtmlを値で書き換えます。$セレクタ.html(値)
itemの属性に「css」を指定すると、セレクタのcssを値で設定します。$セレクタ.css({値})

また、itemの値に「{{:count}}」含めると、追加されるblockの番号を代入できます。

詳しくは、サンプルのソースをご参照ください。

Category

memorandum index