1

Jqueryafter()メソッドを使用して、選択した要素の後に HTML 要素を挿入します。私のコードは

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

Jquery コード:

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

上記のコードは正常に動作します。Jquery は、2 つのタグの<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 は最初の元のタグを削除し、 2 つのタグ<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>"))を作成するか、同じ要素を から に移動するだけです。つまり、選択された H2 要素は最後の要素の後に配置されます。$( ".inner" )each$('h2').inner.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 に答える