jQuery:预处理和追加<p>标签

jQuery: Prepending and appending <p> tags

本文关键字：gt 标签 lt 追加 jQuery 预处理      更新时间：2023-09-26

我有一个元素，我正在页面加载时克隆它：

(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>

根据您的描述，您所尝试的实际上是将克隆包装为

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

您的代码应该是：

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

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>

你能做吗：

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

即，先准备一个打开的<p>标签，然后准备元素，然后准备一个关闭的</p>标签

$parent = $(".parent").clone().html();
$("#linked_product_data").prepend("<p>"+$parent+"</p>");
相关文章：