Accessing elements of ajax html response with jquery

Question

I have problems to access elements of a html response of an ajax request. I am using jquery and I try to simplify the problem as much as possible:

I have an ajax html response like this (kept very simply):

<div id="div_1"><span id="span">Text in Span</span></div>
<div id="div_2">Text in div</div>

Now I am trying to access certain elements of this html response with jquery:

 $.ajaxSetup(
 {
   success: function(html)
   {
    alert($('#span', html).html()); //works fine
    alert($('#div_1', html).html()); // doesn't work, why?
    alert($('#div_2', html).html()); // also doesn't work
    alert( $('span', html).first().attr('id') ); // works fine
   }
 }

I actually want to get the id of the first div element, but i seems as i cannot access the first "level" of the html response. I probably could solve the problem with a div surrounding container, which contains everything else.

Is there a another solution oder could somebody explain me, why jquery seems to ignore the first level of the html?

Thank you very much and sorry for my english (I am not a native speaker) Phantom

devdRew · Accepted Answer · 2012-04-24 16:44:39Z

1

Try wrapping response into div, put it in the variable and then use find() to get the element you need from response.

Hope, that helps.

answered Apr 24, 2012 at 16:44

devdRew

4,6013 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Evan Davis Over a year ago

You don't need to add any markup; simply wrapping the response in jQuery, $(html) will parse the HTML and allow it to be searched/updated.

devdRew Over a year ago

alert($('<div>first</div><div>second</div>').find('div:first').html()); try it.

devdRew Over a year ago

alert($('<div><div>first</div><div>second</div></div>').find('div:first').html()); and try this one in your console.

devdRew Over a year ago

Also, you can try this... alert($('<div id="first">first</div><div>second</div></div>').find('div#first').html()); So... :)

David Hedlund Over a year ago

Upvoting this. Wrapping is relevant since providing jQuery with a context is equivalent of $(context).find(...), which means that only child nodes will be searched. Wrapping is not needed to make the HTML jQuery searchable, but in order to make the specified selector find the intended elements.

|

Ram · Accepted Answer · 2012-04-24 16:44:59Z

1

you should add hash for id selectors:

 $.ajaxSetup(
 {
   success: function(html)
   {
    alert($('#span', html).html()); 
    alert($('#div_1', html).html());  
    alert($('#div_2', html).html()); 
    alert( $('span', html).first().attr('id') ); 
   }
 }

answered Apr 24, 2012 at 16:44

Ram

145k16 gold badges174 silver badges201 bronze badges

1 Comment

Phantom Over a year ago

Sorry, I have just made this mistake in the example - the problem occurs even if you add the hash. I corrected the example.

Jonathan Römer · Accepted Answer · 2012-04-24 16:45:43Z

0

Ad the hast tag to the divs like this : #div_1 because its an id.

answered Apr 24, 2012 at 16:45

Jonathan Römer

6285 silver badges25 bronze badges

1 Comment

Phantom Over a year ago

Sorry, I have just made this mistake in the example - the problem occurs even if you add the hash. I corrected the example.

Collectives™ on Stack Overflow

Accessing elements of ajax html response with jquery

3 Answers 3

8 Comments

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

1 Comment

Related