javascript - Get HTML of div element returned by .get with jQuery - Stack Overflow

admin管理员组

文章数量:1424459

I'm trying to get the HTML of a specific div returned by a .get request (the .get request, returns HTML data with 3 divs with 3 different ids)

Here's my code:

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

The content of 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="" alt="">
    </div>
</div>

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

I'm trying to get the HTML of a specific div returned by a .get request (the .get request, returns HTML data with 3 divs with 3 different ids)

Here's my code:

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

The content of 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>

• javascript
• jquery
• ajax
• get

Share Improve this question Follow edited Jan 11, 2012 at 12:01 Goles asked Jan 11, 2012 at 11:39 GolesGoles 11.8k2424 gold badges8080 silver badges140140 bronze badges 1

• Do you mean print as in, to a printer, or to alert() to the screen? – Rory McCrossan Commented Jan 11, 2012 at 11:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

$response.find('#main-images') will return an empty jQuery object. None of the selected elements has a descendant with ID main-images. Instead, one of the selected elements is the one you are looking for.

To get the a reference to the div use .filter() ^[docs] instead :

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

If you want to get the HTML, append the content to an empty div first and remove the unwanted elements:

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

or use a outerHTML plugin:

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

$(data) returns an array of elements and not an ordinary jQuery object. $(data)[1] contains your #main-images element.

As Felix Kling answered, you can use filter instead of find.

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

本文标签： javascriptGet HTML of div element returned by get with jQueryStack Overflow