1

問題は：

次の構造（PHPで生成）をJSON経由で文字列として送信します。

<article>

<header>  
    <h2><a href="#">url</a></h2>
    <p><time datetime="2009-11-05">05 Nov 2009</time></p>
</header>

<div class="entry"> 
    <p>something</p>
    ... 
</div>

<footer>something</footer>

</article>

サイトに記事のリストがあり、既存の記事を受け取った記事に置き換える必要があります。jQueryを使用して、次のようにします。

var $victim = $slider.find('article.loading:first'); 
    $fresh = $(basket.shift());

basket.shift()は上記の文字列形式で受け取った記事であり$victim、既存の記事です。

さて、通常私はします

$victim.replaceWith($fresh);

優れたブラウザ（gecko、webkit）で動作しますが、jQueryには.innerHTMLHTML5要素での使用に関する既知のバグがあります。これについてはここに記載されています。.replaceWith最終的にはそのメソッドを内部的に使用します。

解決策は、ネイティブのJavascriptとメソッドを使用することです.innerHTML。このようなものが機能するはずです：

$victim.parent().get(0).insertBefore($fresh.get(0), $victim.get(0));

そして、それはそうですが、良いブラウザでのみです。varの.get(0)アプローチでは問題があります。$fresh

jsコードでローカルに作成されたノードの挿入をシミュレートしました。これはIEで機能します。

var dummy = document.createElement('article');
    var dummyChild = document.createElement('header');
        txt = document.createTextNode("crap");
        dummyChild.appendChild(txt);
dummy.appendChild(dummyChild);

$victim.parent().get(0).insertBefore(dummy, $victim.get(0));

それで、文字列をDOMサブツリーに変換する他の方法はありますか？または、replaceWithの問題を解決する他の方法はありますか？

注：私はJavaScriptの第一人者/忍者ではありません:)

さて、もう少し読んだ後、私はなぜが.insertBefore機能しないのかを見つけたと思います。

jQuery APIが述べているように（http://api.jquery.com/jQuery/#creating-new-elements）、を文字列として渡すと、その複雑さのために<article>DOM要素も経由で作成されます。.innerHTML

$()代わりにネイティブのcreateElementを強制的に使用する方法はありますか？パフォーマンスの面で問題があることはわかっていますが、少なくともIEは機能します。

4

2 に答える 2

1

エラーは、実際には思ったよりも早く発生している可能性があります。をラップするbasket.shift()と、$()実際にはdivその時点で非表示に追加されます。これを試しましたか：

var $victim = $slider.find('article.loading:first'); 
    fresh = basket.shift();

$victim.replaceWith(fresh);
于 2010-01-30T06:11:14.453 に答える
0

IE では HTML5 要素を操作するときにエラーが発生するため、このページからスクリプトをダウンロードして、ドキュメントの先頭に他のスクリプトより前に含めるようにしてください: http://html5doctor.com/how-to-get-html5-working-in- ie-and-firefox-2/

これにより、IE の HTML5 要素によって引き起こされるエラーを防ぐことができます。

于 2010-01-28T12:00:32.140 に答える