Question

这是一个有趣的问题，我想听听你对此的所有意见。

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呢？

我已经阅读了许多解决方案，说身体标签周围或其内部的额外元素也有效。我觉得这种方法不是很好，因为你添加额外的HTML。

我也看到人们在这些元素上使用正则表达式/替换。这样做会更好，但对HTML仍有同样的影响。

最后，我知道过滤器解决方案。如果你知道确切的元素，这是可以的，但如果你不知道，可能会使用另一个元素。如果不是孩子，过滤器将无法找到它：

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

一个有趣的解决方案是 createDocumentFragment（）。在这个页面的某个地方阅读更多相关信息：http://www.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-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
   }
 });

然而，这不起作用：How do I filter body html the returned data from ajax?

然后我进一步研究了它。

 $.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
    }

感谢您阅读。

jQuery Ajax调用 - 获取正文标记的第一个子元素

0 个答案: