jquery - jquery を使用して、多くの動的属性を持つ要素を複製する

Question

私は、サイトのフォト アルバムの一種を書いています。ユーザーは画像をアップロードできます。jquery アップロード (ajax 呼び出し) を介して画像がアップロードされると、サーバーは動的な情報に移動します。

1. 画像パス
2. 画像ID

特にイメージ ID は、複製する必要があるオブジェクト内のいくつかの場所で使用されます。

        <div class="photoContainer" id=
"photo_clone">
           <form ajaxify="/ajax/photos/metadata/save/" class="editablePhoto" id="**PHOTOID**" data-photoid="**PHOTOID**" action="#" method="post" onsubmit="">
              <div class="photoWrap editablePhotoReady">
                 <div class="letterboxedImage photo editablePhotoImage verticallyCentered" style="height:194px;">
                    <div class="uiScaledImageContainer scaledImage" style="width: 290px; height: 193px; margin-top: -96px;">
                          <img class="scaledImageFitWidth" src="**PHOTO_URL**" width="288" height="194" alt="">
                    </div>
                 </div>
              </div>
              <div class="inputs">
                  <div class="captionArea2">
                    <div class="wrap">
                        <textarea class="uiTextareaNoResize uiTextareaAutogrow captionTextarea mentionsTextarea textInput DOMControl_placeholder" title="Say something about this photo..." name="caption_text" placeholder="Say something about this photo..." role="textbox" aria-autocomplete="list" autocomplete="off" aria-expanded="false" aria-owns="js_34" onkeydown="" aria-label="Say something about this photo..." style="height: 55px; ">Say something about this photo...</textarea>
                            </div>
                        </div>
              </div>   
              <div class="metadataControls">
                 <div class="inner uiBoxGray"><span data-photo="**PHOTOID**" class="metaIcon deleteIcon"></span><span data-photo="**PHOTOID**" class="metaIcon locationIcon"></span><span class="metaIcon photoState"><i>Pending approval</i></span></div>
              </div>
           </form>
            </div> <!--photo id div-->               

このオブジェクトを複製している場合、「これを複製し、複製するときに、複製されたオブジェクトのこれらのプレースホルダーをこのパラメータマップに置き換えて、あなたに渡します」 . 何かのようなもの：

clone(myHtmlToClone, map['imageId': '12345', 'imagePath':'www.domain.com/image/fjeeirefjdf.gif'])

ここで、myHtmlToClone 内の「imageId」はすべて「12345」に置き換えられ、imagePath は「www.domain.com/image/fjeeirefjdf.gif」に置き換えられます。これは、html でプレースホルダーを定義したと仮定しています。上記の HTML コードでは、生の非動的な HTML です。

アイデアを編集:

アイデア #1 find の使用 (別のコード スニペットから取った例で、上記の HTML タグと一致しません)

var clone = $("#my_clone").clone()

        clone.find("input[id$=id]")
                .attr('id',htmlId + 'id')
                .attr('name',htmlId + 'id');

        clone.find("input[id$=deleted]")
                .attr('id',htmlId + 'deleted')
                .attr('name',htmlId + 'deleted');

        clone.find("input[id$=new]")
                .attr('id',htmlId + 'new')
                .attr('name',htmlId + 'new')
                .attr('value', 'true');

        clone.find("select[id*='favoriteQuestion']")
                .attr('id', htmlId + 'favoriteQuestion.id')
                .attr('name', htmlId + 'favoriteQuestion.id');

        $("#childList").append(clone);
        clone.show();

アイデア #2:

var clone = $("#my_clone").clone()

    clone.replace('**PHOTOID**', photoId).replace('**PHOTO_URL**', photoUrl);

編集：ワーキングアンサー：

function addPhoto(photoId) {
    var clone = $("#photo_clone").clone()

    clone.find("img[id$=id]")
        .attr('id', 'photo_' + photoId)
        .attr('name', 'photo_' + photoId);

    clone.find('*[data-photoid="clone.id"]')
        .attr('data-photoid', photoId);

    clone.attr('id', 'photo_' + photoId);
    $("#photoList").append(clone);
    clone.show();
}