使用 jQuery 获取 .get 返回的 div 元素的 HTML答案

【问题标题】：Get HTML of div element returned by .get with jQuery使用 jQuery 获取 .get 返回的 div 元素的 HTML
【发布时间】：2012-01-11 11:39:06
【问题描述】：

我正在尝试获取 .get 请求返回的特定 div 的 HTML（.get 请求返回具有 3 个具有 3 个不同 id 的 div 的 HTML 数据）

这是我的代码：

$.get("ajax/learn-more.html", function(data){
    var $response = $(data);
    alert($response.find('#main-images')); // <= prints [Object object]
    alert("Data Loaded: " + data); // <= displaysthe whole html of learn-more.html
    // how can I get the html of a div in learn-more.html with id="main-images" ???
});

编辑：

learn-more.html的内容：

<div id="something" class="hero-unit span-one-third" style="position: relative;">
    Foo Bar
</div>

<div id="main-images" class="hero-unit span-one-third" style="position: relative;">
    <div id="learn-more-photo" class="span-one-third">
        <img class="thumbnail" src="http://placehold.it/300x180" alt="">
    </div>
</div>

<div id="learn-more">
:D
</div>

【问题讨论】：

您的意思是像 in、to a printer 还是 to alert() 到屏幕上打印？

标签： javascript jquery ajax get

【解决方案1】：

$response.find('#main-images') 将返回一个 empty jQuery 对象。所有选定元素都没有 ID 为 main-images 的后代。相反，所选元素之一是您正在寻找的元素。

要获得对div 的引用，请改用.filter() ^[docs]：

$response.filter('#main-images');

如果要获取 HTML，请先将内容附加到空的 div 并删除不需要的元素：

var container = $('<div />').html(data);
container.children().not('#main-images').remove();
var html = container.html();

或使用outerHTML plugin：

var html = $response.filter('#main-images').outerHTML();

【讨论】：

【解决方案2】：

$(data) 返回一个元素数组，而不是一个普通的 jQuery 对象。 $(data)[1] 包含您的 #main-images 元素。

正如 Felix Kling 回答的那样，您可以使用 filter 而不是 find。

$(data).filter('#main-images').html();

【讨论】：