Question

我试图理解，为什么以下代码会生成四个新段落，而不仅仅是两个。

有人能解释一下$("p").before($("p").clone());部分究竟发生了什么吗？

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").before($("p").clone());
    });
});
</script>
</head>
<body>

<p>paragraph 1.</p>
<p>paragraph 2.</p>

<button>Clone all p elements, and append them to the body element</button>

</body>
</html>

Answer 1

克隆复制<p>中的每一个并返回之前插入的两个段落元素。

更有意义的解释：

您的HTML中有两个<p>元素。
$("p").clone()克隆两个元素并将其传递给before()
before()执行TWICE，每个段落执行一次

作为输出，您将获得2 * 2 = 4个新段落。

Answer 2

$（＆＃34; p＆＃34;）。仅克隆（）结果

然后$（＆＃34; p＆＃34;）。之前（$（＆＃34; p＆＃34;）。clone（））意味着它会追加$（＆＃34; p＆＃34）的结果;）。段落标记之前的clone（）。

Answer 3

当您clone()时，它会创建p元素的深层副本。

before()不仅会将副本附加到现有元素，还会附加到克隆元素。

使用更具体的类名来附加它们，而不是$（＆＃34; p＆＃34;），尤其是当您之前插入的克隆元素和元素是相同类型的元素时。

至少使用这样的不同元素。

$("p").clone().appendTo('body');

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").clone().appendTo('.clone-target');
    });
});
</script>
</head>
<body>

<p>paragraph 1.</p>
<p>paragraph 2.</p>
<div class="clone-target"></div>
<button>Clone all p elements, and append them to the body element</button>

</body>
</html>

＆＃13;

为什么以下代码生成4个元素而不是2个？

3 个答案: