AJAX HTML数据没问题,但find返回null

时间:2012-08-10 20:07:34

标签: jquery ajax

我正在使用$ .get获取HTML文档(也尝试了$ .ajax):

$.get('/products/', function(data) {
    $('.content .article').remove();
    $('.content').prepend($(data).find('.article'));
});

检查数据是否正常:

alert(data);

它打印html文件没有问题。但是当我尝试打印时:

alert($(data).find('.article').html());

alert($('.article', data).html());

它始终打印为空。

我在这里发现了一个类似的问题:Extract part of HTML document in jQuery,但这些解决方案并不适用于我。

编辑: 内容o生成HTML。

<!DOCTYPE html>
<html><head></head><body>

<div class="article"><h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</body></html>

2 个答案:

答案 0 :(得分:2)

嗯,如果你把data的内容放在一边真的很好,但是从我得到的内容中我可以告诉你这些事情......


首先,在最后一个.content语句之后,您在顶部示例中缺少引号。

看这里:

$('.content').prepend($(data).find('.article'));

更正:

$('.content').prepend($(data).find('.article'));

然后,尝试执行console.log($(data));并确保将字符串正确转换为jQuery对象。

另外,尝试执行console.log($(data).find('.article'));并确保它返回的不仅仅是一个元素,因为从许多元素中执行.html()可能会返回null

并且,如果有多个元素并且假设您只想要第一个元素,请执行以下操作:

var articles = $(data).find('.article');
var firstArticle = articles.first().html();

或者如果您想在所有文章中循环,请执行此操作以获取每个html

$.each($(data).find('.article'), function(index, value){
   console.log($(this).html());
});

如果没有什么对您有用,那么我可以告诉您在将data转换为jQuery对象之前尝试检查data的确切值。


解决

  • 从jQuery string的{​​{1}}页面获取/products/时,回复中的$.get组成如下:

enter image description here

  • 正如您所看到的,将data转换为$(data)并尝试查找.article将失败导致该对象不仅仅由一个元素组成。

  • 因此,您的代码必须修改为:

    $.get('/products/', function(data){
        $('.content .article').remove();
        $('.content').prepend($(data).eq(1));
    });
    
  • 现在一切都会有效,因为你的代码会从对象$(data)中找到第二个元素(文章html - 根据数组索引的第一个元素),然后将它放在你的{{1}中} div。

希望这会有所帮助:-)我测试了它并且它正在工作。

<强> PS。不要忘记总是打印元素,正如我告诉你开始我的答案,尝试.content知道它是如何组成的!

答案 1 :(得分:1)

试试这个:

$(data).filter('.article');

这就是我将数据字符串转换为jQuery对象时的结果:

[div.article, div.nav]

似乎在转换表示整个HTML文档的字符串时,jQuery只会生成正文中的项目的集合。