jQuery: How to extract text from specific element within variable

Question

I have a variable that contains simple HTML looking like the following example - the content of the variable is generated dynamically via Ajax:

var errors = "<span id='id1'>Value 1</span><span id='id2'>Value 2</span><span id='id3'>Value 3</span><span id='id4'>Value 4</span><span id='id5'>Value 5</span>";

How can I get the text of a specific element by its ID within this variable, e.g. the text of span with ID='id3' ? Here the result should be "Value 3".

I tried the following but the result I get is always either an empty string or "[object Object]":

$(errors).filter('#id3')
$(errors).filter('#id3').text()
$(errors).find('#id3').text()

Update:
After reading through the comments and answers on this I split my code up and it seems the issue is with the success part of the Ajax where data contains what I showed in the example above but it seems it is not getting stored in the variable "errors". (If I hardcode the variable then it works with .filter .)

var errors = '';
$.ajax({        
    type: "post",   
    url: "ajax.php",
    cache: "false",
    data: {
        node: 'fetchErrors',
        selectedLang: selectedLang
    },
    success: function(data){
        errors = data;
    }
});

Can someone help me with this ?

Many thanks in advance, Mike

I tried your 2nd ans ($(errors).filter('#id3').text()) in firefox working fine. — , Jul 04 '15 at 09:06
@JohnDaniel: Thanks for this. I can confirm this now as well and just made an update to my post. — keewee279, Jul 04 '15 at 09:12
@keewee279, then write this line console.log(typeof data); and see the type returned from server. If it is not string then convert it. — , Jul 04 '15 at 09:19
@keewee279 you may have async problems. Append `async: false` to your ajax object. — manta, Jul 04 '15 at 09:20
@keewee279, you are doing filter before the success function hits. — , Jul 04 '15 at 09:23
I am just wondering if my jQuery is "running too fast" so that it already moves on before it actually has the result from the Ajax since everything else happens outside the Ajax. — keewee279, Jul 04 '15 at 09:24
You are right: check this link for details on `async : false` http://stackoverflow.com/questions/1478295/what-does-async-false-do-in-jquery-ajax try to execute your code within the `success` function — manta, Jul 04 '15 at 09:24
Update: Thanks all ! Just accepted an answer on this. My issue was indeed with the Ajax since jQuery moved on before having the Ajax result so moving everything inside the success part fixed it and then the approach with .filter works fine - the comments pointed me in the right direction so thanks for them ! — keewee279, Jul 04 '15 at 09:28

manta · Answer 1 · 2015-07-04T09:06:12.720

4

You were on the right track...

var errors = "<span id='id1'>Value 1</span><span id='id2'>Value 2</span><span id='id3'>Value 3</span><span id='id4'>Value 4</span><span id='id5'>Value 5</span>";
var obj = $(errors);
var filter = $(obj).filter('#id3'); 
console.log(filter.text());

jsfiddle: fiddle

edited Jul 04 '15 at 09:06

answered Jul 04 '15 at 08:48

manta

1,663
12
12

Thanks a lot ! I tried this but it also returns an empty string for me. – keewee279 Jul 04 '15 at 08:54
Update: Thanks for adding the fiddle. I can confirm that this is working for me as well and just made an update to my post. – keewee279 Jul 04 '15 at 09:13

score 2 · Answer 2 · answered Jul 04 '15 at 08:53

2

try to add async: false to ajax properties.

answered Jul 04 '15 at 08:53

Konstantin Lyashenko

31
2

Thanks - can you explain what this is supposed to do ? – keewee279 Jul 04 '15 at 09:23

Daniel Dušek · Accepted Answer · 2015-07-04T09:26:39.547

2

This works for me (fiddle).

success: function(data){
    var result = $(data).filter("#id3").text();
}

edited Jul 04 '15 at 09:26

answered Jul 04 '15 at 09:19

Daniel Dušek

13,683
5
36
51

Thanks. I am going to accept this one since it pointed me in the right direction. My issue, however, was with the Ajax since jQuery moved on before having the Ajax result so moving everything inside the success part fixed it and then this approach works fine. – keewee279 Jul 04 '15 at 09:27
@keewee yes ajax is ```asynchronous``` which means the function finishes before the results (```data``` in your case) come from server. – Daniel Dušek Jul 04 '15 at 09:34

score 1 · Answer 4 · answered Jul 04 '15 at 08:50

1

This does the job:

$(errors).filter("#id3").text()

answered Jul 04 '15 at 08:50

Antonio Smoljan

2,187
1
12
11

Thanks. I had tried this (see above) but it didn't work in my case. – keewee279 Jul 04 '15 at 08:50

jQuery: How to extract text from specific element within variable

4 Answers4