Question

我有一个我在页面加载时克隆的元素：

(function($) {
    $(document).ready(function() {
        $("#linked_product_data").prepend($(".parent").clone());
        $(".parent").prepend($("<p>"));
        $(".parent").append($("</p>"));
        $(".parent").append($("<hr>"));     
        $(".parent").prepend($("<p>Grouped Product:</p>"));         
    });
}(jQuery));

我试图将此克隆元素包装在<p>标记中，正如您在代码中看到的那样。但是，当我查看源代码时，我发现页面实际上已经预先添加并附加了匹配的<p>个标记对，有没有人知道这个解决方案？

输出如下：

<div class="bfi-parent">
    <p>Grouped Product:</p>
    <p></p>
    Test |
    <a href="h#"> Manage</a>
    <ul style="list-style-type:none">
        <p></p>
        <hr>
</div>

Answer 1

根据您的描述，您正在尝试的实际上是将克隆包装起来

＆＃13;

(function($) {
  $(document).ready(function() {
    var $clone = $(".parent").clone().prependTo('#linked_product_data');
    $clone.wrap("<p />").append("<hr />");
    $clone.prepend("<p>Grouped Product:</p>");
  });
}(jQuery));

＆＃13;

#linked_product_data {
  border: 1px solid grey;
  padding: 5px;
}
#linked_product_data > p {
  border: 1px solid blue;
  padding: 5px;
}
.parent {
  border: 1px solid red;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="parent">some content</span>
<div id="linked_product_data"></div>

＆＃13;

Answer 2

您的代码应为：

{{1}}

Answer 3

JS Fiddle

var $test = $('#test'),
  $html;

$html = '<p class="cloned">' + $test.html() + '</p>';
$test.append($html);

.cloned {
  outline: 1px dotted green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="test">
  <span>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>
    <img src="//placehold.it/200x150?text=IMG">
    <br>Quis itaque rem in quos maxime optio dicta!
  </span>
</div>

Answer 4

你能做到：

.prepend("<p>"+$(".parent").clone().toString()+"</p>");

即。添加一个开始<p>标记，然后是元素，然后是结束</p>标记

$parent = $(".parent").clone().html();
$("#linked_product_data").prepend("<p>"+$parent+"</p>");

jQuery：预先添加和附加<p>标签

4 个答案: