在 .before(） 中多次使用相同的参数并不像我预期的那样工作

Using same argument multiple times in .before() does not work as I expected

本文关键字：参数 工作 before      更新时间：2023-09-26

HTML：

<div class="here">This is here</div>
<div class="insert">This is to be inserted</div>

j查询：

$(document).ready(function() {
  var $m = $(".insert");
  $(".here").before($m);
});

它产生预期的结果 - 剪切insertdiv 并将其粘贴到herediv 之前。但如果代码如下， 

$(".here").before($m, $m);

然后insert在herediv之前不会出现两次。但是，如果我使用以下方式使用第一个参数以外的div参数作为第二个参数：

$(".here").before($m, $('<div class="insert2">This is insert 2</div>'));

然后insert和insert2 divs都出现在here div之前.

如果两个参数相同，为什么两个divs不会出现在here div之前？

您正在做的是将现有元素从一个位置移动到另一个位置;您不会创建它的其他副本。使用.clone()方法创建副本并插入到所需位置：

$(".here").before(
    $m         /*.attr("title", "original")*/,
    $m.clone() /*.attr("title", "copy # 1")*/,
    $m.clone() /*.attr("title", "copy # 2")*/
);

您的另一个示例创建了一个新元素，这就是它按预期工作的原因。

当您将现有的 DOM 元素作为参数提供给 DOM 插入方法时，它不会复制该元素，它只是将该元素移动到您指定的位置。单个 DOM 元素一次只能位于一个位置，因此，如果指定同一元素两次，则会移动它两次。如果需要元素的副本，则必须显式创建它们：

$(".here").before($m, $m.clone());

这是因为一个元素只能存在一次。$(".here").before($m, $m); 您说在".here"之前插入element_x，然后在".here"之前插入element_x。所以它被移动了，而不是再次移动到同一个地方。

使用 $(".here").before($m, $('<div class="insert2">This is insert 2</div>'));，您将在第二个参数中创建一个新元素，以便正常工作。

要复制元素以插入两次，您可以克隆该元素并同时插入：

var $m2 = $m.clone();
$(".here").before($m, $m2);
相关文章：