Question

我想在克隆对象中添加额外的html。

var item = $("#clone")
    .clone(true, true)
    .attr({"id": "citem", "class": "row cartItem_" + item_id})
    .css('display', 'block')
    .appendTo("#all-items");

我知道换行方法，但那是另外的东西。我想在这个克隆对象后附加html。或者不知怎的，我可以操纵克隆对象元素的HTML。

Answer 1

这种方法是为了解释.clone()的工作原理，并涵盖了你在问题中提到的所有州，例如..

创建DOM的克隆
将附加原始HTML附加到克隆
操纵克隆
操纵克隆中的内容
在另一个克隆中克隆
将另一个克隆附加到克隆
在此克隆对象后附加HTML

＆＃13;

$(function() {
  //! Cloning the HTML
  var $clonedContent = $('.content').clone();

  // Manipulate the cloned element
  // -- Update the existing content
  $clonedContent.find('h5').text("My content just got manipulated");

  // -- Adding raw HTML content
  $clonedContent.append("<small> It's a raw HTML </small>");

  // -- Adding property to an existing content
  $clonedContent.find('small').addClass('make-me-day');

  //! Getting another cloned content
  var $anotherClonedContent = $('.content').clone();
  
  // -- Another manipulation of another cloned content
  $anotherClonedContent.find('h5').text("This is another cloned content");
  
  // -- Manipulate the another cloned content's content
  $anotherClonedContent.find('h5').addClass('make-me-day');

  // -- Add another cloned content to the already manipulated & cloned content.
  $clonedContent.append($anotherClonedContent);

  //! Finally, add the clonedContent to the DOM, aaaand.. add more HTML afterwards.
  $('#main').append($clonedContent, "<em> I added this HTML after the cloned object </em>");
  
});

＆＃13;

.make-me-day {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div class="content">
    <h5> Just a simple content </h5>
  </div>
</div>

＆＃13;

Answer 2

我认为这比你想象的要容易得多：

$(function(){
  var item_id=0;
  
  // function to clone your element
  var newItem=function(){
    item_id++;
    return $('#clone')
      .clone(true, true)
      .attr({'id':'citem_'+item_id, 'class':'row cartItem_'+item_id})
      .css('display','block')
      .appendTo('#all-items');
  };
  
  // Clone element and edit what you want
  newItem().html('hobby').css('color','blue');

  // Clone element and append what you want
  newItem().append(' - <i>spaghetti</i>');
  
  // You can also find element by id
  $('#citem_2').css('color','red');
  
  //You can add buttons to do it
  $('button:eq(0)').on('click',function(){
    newItem().html('Your <b>html</b> here.');
  });
  $('button:eq(1)').on('click',function(){
    newItem().append(' - Your <b>html</b> here.');
  });
});

<button>New clone</button>
<button>New clone + append</button>
<div id="all-items">
  <div id="clone">pizza</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 3

假设你试图在克隆之后添加html ：

$("#toclone") .clone() .attr({"id":"cloned"}) .appendTo("#all-items") .after("<div>some more content <em>after</em> the clone</div>");

.appendTo()会返回附加的元素，因此您可以根据需要对其进行操作，例如使用.after()

Answer 4

我仔细研究了这个赏金问题的所有答案和评论......

我可以看出，竞标者有点苛刻，这是好的，因为100代表。积分是有价值的。

我认为这个问题实际上包含两个。

如何克隆
如何«操纵克隆对象的HTML» - 9月22日的Wasif Iqbal。

我认为这个问题的目的是为了解释如何操纵克隆，不仅是在创建和附加到某个地方，而且也是在之后。

我认为 以下非常酷的例子 可能是«有效答案» - 于9月29日加入。其他答案也很好，无论如何......所以做了一个补充的努力。
;）

对所有人的第一个解释：
克隆元素是由jQuery .clone()完成的。所以读得很好。

的然后：
jQuery chaining很好地以简洁的方式在克隆中附加“内部”或“之前/之后”的其他内容，如其他答案中所示。

但是之后要操纵它，就像在另一个点击事件处理程序中一样......
这是要知道的技巧，这在前面的参考文献中没有解释：

您必须确保为其设置唯一id 属性，而不是与原始属性相同的id。

因为您知道id应该是唯一的！


«一个戒指来统治他们   找到它们的一个戒指，一个戒指带来它们全部并且在黑暗中绑定它们。»

   - 一个着名的deamon在伪造诅咒的同时说了这个......

那么 ......如果不清楚，还可以给出更多解释？提醒读者应该已经理解了所有内容。

我制作了一个有趣的«克隆并杀死它 - 游戏»来进行克隆和进一步操作。
对于“灵感”，我不得不承认我昨天晚上看了一部日本的僵尸电影...... 笑！

享受此代码段的乐趣：
（也在CodePen）

// Constants var number = 1; var revealed = false; // The cloning function $("#cloneIt").click(function(){ var cloning = $("#Human") .clone() .attr({"id": "Clone_number_"+number, "class":"clone"}) .appendTo("#CloneBucket"); $(this).val("Clone him again! It's fun!"); number++; if(number==4){ $(".reveal").show(); } if(number==9){ $(this).val("Enought! This is now illegal.").prop("disabled",true); } // Add them to select var options="<option disabled selected class='deceased'>KILL THEM!</option>"; for (i=1;i<number;i++){ if( $("#CloneBucket").children().eq(i-1).hasClass("dead") ){ options += "<option value='"+i+"' class='deceased'>Clone #"+i+"</option>"; }else{ options += "<option value='"+i+"'>Clone #"+i+"</option>"; } } $("#cloneSelect").html(options); if(revealed){ reveal(); // Sub function to add clones to a select element. } }); // Reveal clone numbers $(".reveal").click(function(){ reveal(); setTimeout(function(){ $(".reveal").val("Kill a clone! (While it's not illegal!)").removeClass("reveal").addClass("shoot"); },50); }); // Kill button $("#page").on("click",".shoot",function(){ $(this).prop("disabled",true).val("Select one"); $("#cloneSelect").show(); }); // Select kill target $("#cloneSelect").change(function(){ var thisCloneIs = parseInt($(this).val()); var niceShot = "#Clone_number_"+thisCloneIs; $(niceShot).css({"opacity":0.3,"color":"red"}); $(niceShot+" .definition").html("I was the number"+thisCloneIs).parent().addClass("dead"); // Redish the option $(this).find("option").eq(thisCloneIs).prop("disabled",true).addClass("deceased"); $(this).find("option").eq(0).prop("selected",true); // Bravo! var allDead = []; setTimeout(function(){ $("#cloneSelect").find("option").each(function(index){ if( $("#cloneSelect").find("option").eq(index).hasClass("deceased") ){ allDead.push(true); }else{ allDead.push(false); } }); if( allDead.indexOf(false)==-1 ){ // Reset this super gaming experience for a new. $("#CloneBucket").html(""); $(".shoot").addClass("reveal").removeClass("shoot").val("Reveal clone numbers!").prop("disabled",false).hide(); $("#cloneIt").val("Clone again?").prop("disabled",false); $("#cloneSelect").html("").hide(); revealed = false; number = 1; } },50); }); function reveal(){ $(".clone .definition").each(function(index){ var cloneIndex = index+1; // zero-based $(this).html("I'm the number "+cloneIndex); revealed = true; }); }

img{ width:60px; } div{ text-align:center; } .reveal{ display:none; } #CloneBucket div{ display:inline-block; padding:10px; } #CloneBucket{ margin:0 auto; text-align:center; } select{ display:none; margin:0 auto; } .deceased{ color:red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <div id="page"> <input type="button" id="cloneIt" value="Want to clone him?"><br> <br> <div id="Human"> <img src="http://image.flaticon.com/icons/svg/10/10522.svg"><br> <span class="definition">I'm a real human!</span> </div> <br> <input type="button" class="reveal" value="Reveal clone numbers!"> <select id="cloneSelect"></select> <div id="CloneBucket"></div> <br> </div>

Answer 5

仍在等待评论中的澄清，但我认为这个解决方案正是您所寻求的：

$('button').click(function() {
  $('#clone').clone()
    .append('<span style="color:red;">some other elements</span>')
    .removeAttr('id')
    .appendTo('#all-items');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button>Click to clone</button>
<div id="all-items">
  <div id="clone">pizza</div>
</div>

由于appendTo返回附加的原始元素，因此您可以对返回的值使用after，以便在刚刚追加的克隆元素之后添加一些新元素：

$('button').click(function() {
  $('#clone').clone()
    .append('<span style="color:red;">some other elements</span>')
    .removeAttr('id')
    .addClass('cloned')
    .appendTo('#all-items')
    .after('<div>this element was added after the cloned element (no blue border here)</div>');
});

.cloned {
  border: 1px solid blue;
  margin: 5px;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button>Click to clone</button>
<div id="all-items">
  <div id="clone">pizza</div>
</div>

Answer 6

可以使用jQuery的add()函数随时添加到集合中这有效地添加到集合中，放置在克隆本身之后传递给add()的任何内容，而不是将内容放置在克隆中的append，回答问题

“我想在此克隆对象后附加html”

var more1 = $('<span />', {html : '<em> and will</em>'}); // element(s) to add
var more2 = '<span> happen again....</span>'; // or strings of HTML for that matter

    
var item  = $("#clone").clone(true, true)
                       .attr({"id": "citem"})
                       .show()
                       .add(more1) // add whatever after the clone
                       .add(more2) // before appending everything
                       .appendTo("#all-items");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="clone">
    <span>All of this has happened before</span>
</span>
<br /><br /><br />
<div id="all-items"><!-- clone goes here --></div>

来自documentation

给定一个表示一组DOM元素的jQuery对象，   .add()方法从这些对象的并集构造一个新的jQuery对象   元素和传递给方法的元素   .add()的论点   可以是$()接受的任何内容，包括jQuery   选择器表达式，对DOM元素的引用或HTML片段。

示例：$("p").clone().add("<span>Again</span>").appendTo(document.body);

add()不会更改原始集合，但会返回一个新集合，因此如果不直接链接到已修改的集合，则必须存储该集合

var clone   = $('#elem').clone(true, true);
var changed = clone.add('<div>new content</div>'); // clone is not changed

在克隆中操作内容的方式与使用jQuery操作任何其他集合完全相同

Answer 7

在此发布一些链接

var clone = parent.find('.divclone').clone();
clone.removeClass('identifier');
clone.removeClass('hide');
//.. code changes for the new clone
clone.find(".link-slug").attr('href',invstr_val.slug_url);
// append it again to the original 
clone.insertAfter(parent.find(".divclone"));

在jquery中将其他html附加到克隆对象

7 个答案: