13

私が知る限り、次のコードが機能し、要素を作成してから<div>要素を作成する必要が<p>あります。式は、次の2つの要素を持つjQueryオブジェクトになります。

$("<div>first element's content</div>").after("<p>second element's content</p>");

しかし、私が得るものは非常に異なります。ドキュメント（「切断されたDOMノードの挿入」の見出しを参照）は、上記のコードがjQueryオブジェクトになり、両方のHTMLスニペットを取得して2つのDOM要素を構築する必要があることを示しています。しかし、私が得たのは、すべて1.4を超えるいくつかの異なるバージョンのjQueryで、ノードが1つしかないjQueryオブジェクトです。ただし、次のコードは問題なく機能し、正しいjQueryオブジェクト（内部に2つの要素）を返します。

$("<div></div>").after("<p>second element's content</p>");

そして、この例も同様に機能します。

$("<div></div>").after("<p>second element's content</p>").after("<p>third element's content</p>");

作成される最初のDOMノードが空の場合、このメソッドは正常に機能するようです.after()が、空でない場合は機能しません（追加される後続のDOMノードの内容に関係なく）。

jQueryの内部、風変わりなDOMの問題、JavaScriptの特性について何かが足りないのでしょうか、それともバージョン1.4から1.7まで続くjQueryのバグでしょうか。

（これは、問題をかなりわかりやすく示しているわずかなJSFiddleです。）

4

4 に答える 4

10

これは、jQuery<1.9の既知のバグでした。http://bugs.jquery.com/ticket/8759を参照してください

jQuery> = 1.9では、アップグレードガイドの次の情報に注意する必要があります。

1.9より前.after()の、、、.before()および.replaceWith()は、セットの最初のノードがドキュメントに接続されていない場合、現在のjQueryセットのノードを追加または変更しようとし、その場合、元のセットではなく新しいjQueryセットを返します。これにより、いくつかの不整合と完全なバグが発生しました。メソッドは、引数に応じて新しい結果を返す場合と返さない場合があります。1.9以降、これらのメソッドは常に元の変更されていないセットを返し、、、、または親のないノードで使用しようとしても効果はありません。つまり、セットまたはそれに含まれるノードは変更されません.after()。.before().replaceWith()

于 2012-05-07T22:33:47.740 に答える
6

add()コレクションにオブジェクトを追加するために使用します。すでに存在する、または変数にキャッシュされているDOM要素でより多くを使用after()しますが、ほとんどの場合、動的マークアップを使用する場合は、同等のを使用する方が実用的insertAfter()です。

$("<div>first element's content</div>").add("<p>second element's content</p>");

編集：

これは動作します...

var $el = $('<div/>', {
    text: 'hey there'
}).after('<p>Lorem</p>');
于 2012-05-07T21:32:30.733 に答える
0

.add()の代わりにまだ問題が発生していることがわかった.after()ので、このバグを回避するもう1つの簡単な方法は、ラッパー要素で.append()ある兄弟要素を破棄.html()し、ラッパーの内部コンテンツを取得するために使用することです。

例：

$('body').append(
    $('<span/>').append(
        $("<div>first element's content</div>")
    ).append(
        $("<p>second element's content</p>")
    ).html()
);

<div>これにより、が追加されます<p>が、外側は破棄され<span>ます。私はこれが通常はうまくいくことを発見しまし.append()たが、問題が発生する可能性があります.appendTo()

于 2015-11-06T20:39:07.560 に答える
0

jQuery 1.12.4では、IDセレクターの代わりにクラスセレクターを使用するとこの問題が解決することがわかりました。

あなたが苦労しているなら
    $("#myelement1").after("<p>test</p>")、

要素に一意のクラスを追加して、これを試してください。
    $(".myelement1").after("<p>test</p>")

于 2018-05-18T12:54:01.140 に答える