3

を使用して切断されたDOMノードのシーケンスを構築しようとすると.after、それらが空の場合は正常に機能します。

[14:56:45.186] $('<span></span>').after('<p></p>');
[14:56:45.193] ({0:({}), length:2, prevObject:{0:({}), length:1}, context:(void 0), selector:".after([object Arguments])", 1:({})})

しかし、最初のノードにテキストを追加しようとすると、失敗します。

[14:56:41.521] $('<span>test</span>').after('<p></p>');
[14:56:41.525] ({0:({}), length:1})

その結果を変数に割り当てて検査しようとすると、afterまったく呼び出されていないように見えます。

ここで何が起こっているのですか、どうすれば回避できますか？

編集：興味のある人のために、私は私にとって人生をはるかに楽にしているように見える次のラッパーを書くことになりました：

function tag(name) {
    return function(contents, options) {
        var o = options || {};
        var is_array = $.type(contents) === "array";
        if (!is_array) {
            o.text = contents;
        }
        result = $('<' + name + ' />', o);
        if (is_array) {
            $.each(contents, function(i, child) { result.append(child); });
        }
        return result;
    }
}
var span = tag('span');
var div = tag('div');
4

2 に答える 2

8

バグを明確にするために、JavaScriptコンソールでコードを実行すると、次のようになります。

> $('<span></span>').after('<p></p>');
[<span>​&lt;/span>​,<p>​&lt;/p>]
> $('<span>test</span>').after('<p></p>');
[<span>​test​&lt;/span>​]

jQuery 1.9アップグレードガイドによると：

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

したがって、観察された動作は.after()、親のないノードで使用した結果として生じるバグです。1.9の時点で、jQuery開発チームはこの不整合を完全に削除することで解決しました。.after()この方法を使用すると、常に最初のノードに<p>後を付けずに返す必要があります（fiddle）。

回避策：

DOMノードを単純な配列にプッシュします。または、それらを親ノードに追加してから、すべての子を取得します:(フィドル）

$chain = $('<div>').append('<span></span>').append('<p>qwer</p>').children();
于 2013-01-15T20:40:13.877 に答える
1

新しいノードの作成は通常、次のように行われます。

$('<span />', {text: 'test'}).after($('<p />'));
于 2013-01-15T20:07:24.053 に答える