Question

我有一个div

<div id="myDiv"><h3 id="myHeader"></h3 ></div>

我创建了一些div的克隆

  var $divClone1 = $('#myDiv').clone();
  var $divClone2 = $('#myDiv').clone();
  var $divClone3 = $('#myDiv').clone();

我希望能够将 myHeader 的值设置为三个克隆中每个克隆的不同内容 - 然后他们会将所有单个克隆列入具有不同的屏幕myHeader 值。

如何使用jQuery实现这一目标？

Answer 1

我不确定，如果此处有多个具有相同值的ID，则请尝试删除ID。

var $divClone1 = $('#myDiv').clone().removeAttr("id").find("h3").removeAttr("id").html("Hello");
var $divClone2 = $('#myDiv').clone().removeAttr("id").find("h3").removeAttr("id").html("World");
var $divClone3 = $('#myDiv').clone().removeAttr("id").find("h3").removeAttr("id").html("Senty");

Answer 2

Ids在页面上应该是唯一的。我建议使用类名而不是ID。如果每个元素都需要唯一ID，则可以在克隆后应用它们。

我只使用jQuery一次来获取对原始div的引用，然后制作它的克隆。

<div class="myDiv"><h3 class="myHeader"></h3 ></div> 

var $myDiv = $('.myDiv'),
    $divClone1 = $myDiv.clone(),
    $divClone2 = $myDiv.clone(),
    $divClone3 = $myDiv.clone();

$divClone1.find('.myHeader').attr('id', 'Clone1').text('Clone1');
// Attach to DOM
$divClone2.find('.myHeader').attr('id', 'Clone2').text('Clone2');
// Attach to DOM
$divClone3.find('.myHeader').attr('id', 'Clone3').text('Clone3');
// Attach to DOM

祝你好运！

Answer 3

首先，您不应克隆具有ID的标记（或者您应该在克隆后处理它们），因为ID应该是唯一的。你应该用这样的类替换它：

<div class="myDiv"><h3 class="myHeader"></h3 ></div>

现在你可以使用任何$ divCloneX并更改任何属性：

$($divClone1).find(".myHeader").html("new value");

或

$(".myHeader", $divClone1).html("new value");

Answer 4

只需限制scope并使用html()。

<强> HTML

<div id="wrapper">
    <div id="myDiv"><h3 id="myHeader">foo</h3 ></div> 
</div>

<强> JS

var $divClone1 = $('#myDiv').clone();
var $divClone2 = $('#myDiv').clone();
var $divClone3 = $('#myDiv').clone();

$('#myHeader', $divClone1).html('bar');
$('#wrapper').append($divClone1);

<强> JSFiddle

更新克隆div中的元素

4 个答案: