Получить HTML элемента div, возвращенного .get с помощью jQuery

Question

Я пытаюсь получить HTML-код определенного div, возвращаемого запросом .get (запрос .get возвращает HTML-данные с 3 div с 3 разными идентификаторами)

Вот мой код:

$.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" ???
});

EDIT:

Содержание 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>

Answer 1

$response.find('#main-images') вернет пустой объект jQuery. Ни один из выбранных элементов не имеет потомка с идентификатором main-images. Вместо этого один из выбранных элементов - это тот, который вы ищете.

Чтобы получить ссылку на div, используйте .filter() ^{[документы]} вместо:

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

Если вы хотите получить HTML, сначала добавьте содержимое к пустому div и удалите ненужные элементы:

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

или используйте outerHTML плагин :

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

Answer 2

$(data) возвращает массив элементов, а не обычный объект jQuery. $(data)[1] содержит ваш #main-images элемент.

Как ответил Феликс Клинг, вы можете использовать filter вместо find.

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