jQueryがクローンのhtmlを変更しました

Question

クリックすると、divがコピーされます。私はいくつかのHTMLを変更して、追加したいと思います。

私は以下を試しました。クローンして追加しますが、htmlを変更することはできません。それを処理する最善の方法は何か、私は間違っていると確信しています。

おかげ

var htmlStr = $(this).parents(".listingContainer").first(); 
$htmlStr.find(".saveCompareShow").remove() 
$(htmlStr).clone().appendTo('.compareWrapper');       

Answer 1

を置き換えるために、これを試してみてくださいそれはクローンされていません。セレクタの代わりに変数を使用するだけです。あなたがlistingContainer DIVの内容のクローンを作成し、compareWrapper divのにそれらを追加する前に内容を変更することができます

​<div class='listingContainer'> 
    <div class='listing'> 
     Something 
    </div> 
    <div class='listing'> 
     Another something 
    </div> 
</div> 

：あなたは、このようにHTMLを持っていると仮定すると

。 http://jsfiddle.net/hkBMK/

Answer 2

ので、あなたの変数htmlStrは実際の要素ではなく文字列です。しかしそれは大丈夫です。私はあなたが二行目でこれを行うために必要があると思う：

htmlStr.remove(".saveCompareShow"); 

私がcorrecly表示された場合、あなたはクラスで要素を削除しようとしている「.saveCompareShow」htmlStr要素から。そうですか？

** EDIT **あなたはDOM要素を変更したいだけであるかのようにあなたがそれを扱うべきでDOM要素をクローン化したら

両方のライン2及び3

$(htmlStr).clone().remove(".saveCompareShow").appendTo('.compareWrapper'); 

Answer 3

をクローニングした後、あなたはそれがすでにHTMLたかのようにオブジェクトを扱うことができます：私はまた、あなたが働いてそれを見ることができるようにjsFiddleを掲載しました

$(document).ready(function() { 
    $('.listing').click(function() { 
     var $htmlStr = $(this).parents(".listingContainer").first(); 
     $htmlStr.clone().find('.listing').html('<li>Cloned</li>').appendTo('.compareWrapper'); 
    }); 
}); 

：次のJavaScriptは、簡単な例を示していますドーム。例えば

- HTMLページ上：

<div id="cloneHere"></div> 
<div class="well" id="buildInfoTemplate"> 
    <form> 
     <fieldset> 
      <legend></legend> 
      <label></label> 
      <input type="text" placeholder="Type something…"> 
      <span class="help-block">Example block-level help text here.</span> 

      <button class="btn">Save</button> 
     </fieldset> 
    </form> 
</div> 

はあなたが助けブロックのテキストを変更したいとしましょう：

var template = $('#buildInfoTemplate').clone().removeAttr('id'); 
$('.help-block',template).html('hi there ryan'); 
$('#cloneHere').append(template); 

そして、あなたが買ってあげる：

<div id="cloneHere"> 
    <div class="well"> 
    <form> 
     <fieldset> 
      <legend></legend> 
      <label></label> 
      <input type="text" placeholder="Type something…"> 
      <span class="help-block">hi there ryan</span> 

      <button class="btn">Save</button> 
     </fieldset> 
    </form> 
    </div> 
</div>