Question

原来的div非常大，所以基本上这里是一个精简版。每次按下按钮时，我都有一个div克隆到另一个div中。

<div id="demo_variation">
    <div>
        <h4 class="panel-title">
           <span class="title">Product Variation</span>
        </h4>
    </div>
</div>

<div id="all_variations">

</div>

现在当有人点击按钮我想将#demo_variation克隆到#all_variation时，还需要更改id和title之类的内容。 理想情况下，我想要的是做这样的事情。

var newVariation = $('#demo_variation').html();
newVariation.find('#demo_variation').attr('id', 'product_variation_1');
newVariation.find('.title').text('Product Variation 1');

但由于某种原因，这不起作用。我做错了吗？

Answer 1

您可以像这样使用clone()：

＆＃13;

var count = 0;
$('button').on('click',function(){
  var cont=$('#demo_variation').clone().prop('id','new'+count);
  $('#all_variations').append(cont);
  $('#all_variations .title').last().text('New Title'+count)
  count++;
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="demo_variation">
    <div>
        <h4 class="panel-title">
           <span class="title">Product Variation</span>
        </h4>
    </div>
</div>

<div id="all_variations">
</div>
<button>Append New</button>

＆＃13;

Answer 2

正如其他人所说，你需要使用.clone()克隆div，然后更改克隆对象的属性。

＆＃13;

$('button').click(function() {
  var cloneObj = $("#demo_variation").clone();
  $(cloneObj).attr("id", "product_variation_1");
  $(cloneObj).find("span.title").text("Product Variation 1");
  $("body").append($(cloneObj)[0].outerHTML);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id="demo_variation">
  <div>
    <h4 class="panel-title">
               <span class="title">Product Variation</span>
            </h4>
  </div>
</div>
<button>
  Clone
</button>

＆＃13;

示例：https://jsfiddle.net/482fhmmv/

如何修改元素的部分，当它在变量内部时

2 个答案: