1

Jqueryafter()方法用于在选定元素之后插入 HTML 元素。我的代码是

  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
  </div>

jQuery代码：

$( ".inner" ).after( "<h2>Greetings</h2>" );

上面的代码工作正常。Jquery<h2>Greetings</h2>在两个div标签之后插入代码。HTML 生成如下

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <h2>Greetings</h2>
  <div class="inner">Goodbye</div>
  <h2>Greetings</h2>
</div>

但是当我将 Jquery 选择器$('h2')作为参数传递给after()如下方法时

$( ".inner" ).after( $('h2') );

Jquery 删除第一个原始标签，然后在两个标签<h2>Greetings</h2>之后插入标签。生成的 HTML 如下所示。<h2>Greetings</h2>div

<div class="container">
  <div class="inner">Hello</div>
  <h2>Greetings</h2>
  <div class="inner">Goodbye</div>
  <h2>Greetings</h2>
</div>

传递 Jquery DOM 选择器和纯 HTML 标记时有什么区别。

4

2 回答 2

3

当你使用字符串时，jQuery 会根据传入的 HTML 字符串创建必要的元素，所以

$("<h2>Greetings</h2>")

实际上创建了一个新的 H2 元素，而

$('h2')

选择文档中的所有 H2 元素。

就像after()这样

 $.fn.after = function(arg) {
     return this.each(function() { // loops over all .inner elements

         var elem = $(arg); // "h2" selects all H2, "<h2>" creates H2 elements
         this.parentNode.insertBefore(elem, this.nextSibling); // something like that,
     });                                                       // not really important ?
 }

..它要么为在 中找到的每个匹配元素创建一个新的 H2 ( $("<h2>"))$( ".inner" )，因为each循环，或者它只是将相同的元素从$('h2')每个移动到之后.inner，这意味着选定的 H2 元素将在最后一个之后结束.inner

使用选择器时，选择页面上现有的 H2 元素，然后移动它们

var h2 = $('h2'); // selects all H2 elements on the page

$( ".inner" ).after( h2 ); // moves those elements after .inner
于 2016-08-13T15:49:42.060 回答
0

当您使用 $("selector") 时，您引用的是 DOM 元素，在您的示例中，您选择的是“h2”元素。

因此，当您将其附加到另一个元素或使用 after() 时，您将获取元素本身并将其移动到新位置。

您可以使用 JQuery克隆功能来克隆选定的元素

var clonedH2 = $("h2").clone()
$("selector").after(clonedH2)
于 2016-08-13T16:51:20.717 回答