2

アイデアは、Web ページのコンテンツを ajax 呼び出しで要求された同じページに置き換えることですが、HTML 要素だけが異なります。

現在、$.ajax成功コールバックにこれがあります：

var replace = function(first, second){

  $(first.html() !== second.html())
      first.replaceWith(second);

};

replace($('#container'), response.find('#container'));

これは機能しますが、コンテンツが常に置き換えられるため、「クリッピング」効果が見られます。ajax リクエストは、特定のクラスが ajax レスポンスからコンテナー タグに追加されるまで、ほぼ毎秒複数回実行されるため、クリッピングは非常に面倒です。

基本的には、異なるhtmlを持つ要素のみを置き換えたいのですが、同じhtmlコードを持つ要素の置き換えを防ぐために、どういうわけか最後のレベルから始めます。

ここでフィドルの例を作成しました：http://jsfiddle.net/2u4eB/

したがって、そのマークアップで<b>は、現在のように div 全体ではなく、タグのコンテンツのみを置き換える必要があり<b>ます。

どうすればこれを達成できるかについての指針はありますか?

4

2 に答える 2

1

いくつかの仮定を立てることができれば、それほど難しくありません。

  • 仮定 1: マークアップは毎回まったく同じである
  • 仮定 2: 変更されるのは、特定の html タグ内の TEXT だけです。

次に、HTML タグを理解する必要があります。あなたが一貫した人であれば、すべての動的データを同様のタグでラップする必要があります-質問で<b>タグについて言及したので、3番目の仮定を立てましょう：

  • 前提 3: すべての動的データが<b>タグでラップされている

次に、あなたがしなければならないのはこれだけです：

var replace = function(first, second) {
    var oldValues = first.find('b'),
        newValues = second.find('b');

    oldValues.each(function(i) {
        if(oldValues[i].textContent != newValues[i].textContent) {
            oldValues[i].textContent = newValues[i].textContent;
        }
    });
};

replace($('#container'), response.find('#container'));

注: jQueryfind()はドキュメント順にノードのリストを返すため、これが機能します。そのため、仮定 #1 は非常に重要です。

于 2013-08-09T16:28:38.413 に答える