Jquery not fetching 'h1' from text

Question

I have this code

success: function(data) {
 title = $(data).find('h1').text();
alert(data);
alert(title);

}

Now data is showing all the html with h1 tags but title is showing null

It's actually showing `null`? I would think it would show an empty string if no matches were found. — , Jul 30 '12 at 02:09

Michael Robinson · Answer 1 · 2012-07-30T02:07:38.653

2

If your data consists of something like:

<h1>heading</h1>
<p>content</p>

Then you need to wrap it before performing your queries:

var title = $('<div/>').html(data).find('h1').text();
alert(title);

edited Jul 30 '12 at 02:07

answered Jul 30 '12 at 02:06

Michael Robinson

29,278
12
104
130

thanks buddy that worked. i was not wrapping it. one thing more what is the diff between `title=xxx` and `var title = xxxx` – Mirage Jul 30 '12 at 02:13
@user1544681 glad it helped! Here is a good answer to your `var` question: http://stackoverflow.com/a/2485895/187954 – Michael Robinson Jul 30 '12 at 02:15
@user1544681 feel free to accept the answer if it helped you solve your problem! – Michael Robinson Jul 30 '12 at 02:15
IS there any way to remove that from the html and store that in $data – Mirage Jul 30 '12 at 02:23
@user1544681 sorry but I don't understand what you mean – Michael Robinson Jul 30 '12 at 02:38
Basically i want to grab the h1 and put in variable and then put the remaining html in `data` variable without div tags – Mirage Jul 30 '12 at 02:50
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/14604/discussion-between-michael-robinson-and-user1544681) – Michael Robinson Jul 30 '12 at 02:51

nnnnnn · Accepted Answer · 2012-07-30T05:09:44.497

The .find() method looks for descendant elements, so if your h1 element is at the "top" level it won't be found. Try .filter() instead:

title = $(data).filter('h1').text();

"Basically i want to grab the h1 and put in variable and then put the remaining html in data variable"

Given a data parameter that is a string something like this:

"<h1>My heading</h1><p>This is a test</p><p>This <span>is another</span> test.</p>"

You can do this:

var $data = $(data),
    $title = $data.filter("h1"),
    title = $title.text();

$data = $data.not($title);

The above results in two jQuery objects: $title, which contains the h1 element, and $data, which contains the rest. From there you can use $title.text() to get the actual text of the h1.

Simple demo: http://jsfiddle.net/yyKCW/

If you mean that you want the "remaining html" as a string then you can do the following after setting $data as above:

var restAsString = $("<div></div>").append($data).html();

Demo: http://jsfiddle.net/yyKCW/1/

Jquery not fetching 'h1' from text

2 Answers2