2

これは興味深い質問です。皆さんの意見をお聞きしたいと思います。

jQuery ajax 呼び出しは、次のタグを取り除きます。

 <html>, <head>, <body> etc.

データを介してそれらにアクセスすることはできません。例えば：

 $.ajax({
   async: 'false',
   dataType: 'html',
   type 'GET',
   url: '/hello.html',
   success: function (data) {
     $(data).find('body'); //would be undefined
   }
 });

これらの要素内の最初の子要素にもアクセスできません。例えば：

 <body>
    <div id="cantTouchThis"> <!-- Not found -->
       <div class="orThis"></div>
    </div>
 </body>

parseHTML (jQuery 1.8+) がこの問題を解決できることをオンラインで読みました。これは問題ありませんが、ユーザーが 1.7.0 以降の jQuery を使用できない場合はどうなるでしょうか?

body タグの周囲またはその内部の追加要素も機能するという多くのソリューションを読みました。余分な HTML を追加するので、このアプローチはあまり良くないと思います。

また、これらの要素に対して正規表現/置換を使用する人も見てきました。これは優れていますが、それでも HTML に同じ影響を与えます。

最後に、フィルター ソリューションについて知っています。正確な要素がわかっている場合はこれで問題ありませんが、わからない場合は別の要素が使用される可能性があります。子でない場合、フィルタはそれを見つけることができません:

 $(data).filter(‘#cantTouchThis'); //Found
 $(data).filter(‘.orThis'); //Not found

興味深い解決策の 1 つはcreateDocumentFragment()でした。詳細については、このページのどこかを参照してください: http://www.smashingmagazine.com/2012/11/05/writing-fast-memory-effective-javascript/。

このタイプのコーディングは、サイトのパフォーマンスを向上させることを目的としています。上記のウェブサイトに素晴らしい例があります。

これに続いて、私はあなたがこれを行うことができると読みました:

 $.ajax({
   async: 'false',
   dataType: 'html',
   type 'GET',
   url: '/hello.html',
   success: function (data) {
     var data = $(data),
         frag = document.createDocumentFragment();

    frag.appendChild($data[0]); //appends nothing
    $(frag).find('#cantTouchThis'); //finds nothing
   }
 });

ただし、これは機能しませんでした: ajax から返されたデータを body html にフィルターするにはどうすればよいですか?

それからさらに見てみました。

 $.ajax({
   async: 'false',
   dataType: 'html',
   type 'GET',
   url: '/hello.html',
   success: function (data) {
     var data = $(data),
         frag = document.createDocumentFragment(),
         $frag;

    for (var i = 0; i < $data.length; i += 1) {
       frag.appendChild($data[i]); //Appends the data to the fragment
    }
    $frag = $(frag);
    $frag.find('#cantTouchThis'); //still finds nothing, find does not work
    $frag.children('#cantTouchThis'); //finds it
    $frag.children('.orThis'); // not found
    $frag.children('#cantTouchThis').find('.orThis'); //finds it
   }
 });

最後に、少し拡張しました。

$.ajax({
   async: 'false',
   dataType: 'html',
   type 'GET',
   url: '/hello.html',
   success: function (data) {
     var data = $(data),
         frag = document.createDocumentFragment(),
         $frag,
         $dataWrap = document.createElement('div'); //Create a div

    $dataWrap.setAttribute('id', 'ajaxContent'); //set an attr
    frag.appendChild($dataWrap); //append it into the dataWrap

    for (var i = 0; i < $data.length; i += 1) {
       frag.getElementById('ajaxContent').appendChild($data[i]); //Appends the data to the fragment child
    }
    $frag = $(frag).children(); //Targets ajaxContent and then you can target everything else
    $frag.find('#cantTouchThis'); //finds it 
    $frag.find('.orThis'); //finds it this time!
   }
 });

このアプローチは悪いですか？少しJSが重いので、それが良い解決策かどうかはわかりません。これにより、（データのループのために）実行が遅くなったり、速度が向上したりしますか。

jQueryを更新せずにbodyタグにアクセスする方法はありますか?

みんなの意見が気になります。何も逃さなかったことを願っています。

編集：

Internet Explorer は、フラグメント自体の getElementById を好まないことがわかりました。

以下を使用してこれを回避できます。

  for (var i = 0; i < $data.length; i += 1) {
       frag.firstChild.appendChild($data[i]); //firstChild works
    }

これを読んでくれてありがとう。

4

0 に答える 0