Unable to loop through elements inside an HTML string using JQuery 2.1.4

Question

I am using a JQuery function to retrieve a string containing some HTML code and process it locally. The string is:

var return_data = '<div><tr><td>blah</td><td>more blah</td></tr><tr><td>blah</td><td>more blah</td></tr><tr><td>blah</td><td>more blah</td></tr><span id="morerows">1</span></div>';

(I understand <tr> should come inside <table> and not inside <div> but this is how I need the input for some reason and that should be inconsequential to the issue at hand.) What I need is to loop through each <tr> and output the contents to the console. I am trying this:

$(return_data).find("tr").each(function(){
  var myData = $(this).html();
  console.log(myData);
});

But the above does nothing; no output on the console. Just to be sure, I changed the console.log() input to simply "hello" and turns out, the control isn't even entering the loop. What could possibly be causing this?

No point doing console.log($(this)) if the loop isn't being entered to begin with. That's what I said in the question as well. Even a console.log("hello") didn't execute. — TheLearner
– TheLearner, Commented Jan 16, 2016 at 7:51
Nope, they shouldn't be ignored because to JQuery, they should just be another element within an element. — TheLearner
– TheLearner, Commented Jan 16, 2016 at 7:52
A console.log($(return_data)); shows that there is only text and the span in there. — tkausl
– tkausl, Commented Jan 16, 2016 at 7:53

Ibrahim Khan · Accepted Answer · 2016-01-16 07:57:20Z

1

You may need the following. Wrap trs with a table and loop through the trs instead of div.

var return_data = '<div><table><tr><td>blah</td><td>more blah</td></tr><tr><td>blah</td><td>more blah</td></tr><tr><td>blah</td><td>more blah</td></tr></table><span id="morerows">1</span></div>';

$(return_data).find("tr").each(function () {
    var myData = $(this).html();
    console.log(myData);
});

edited Jan 16, 2016 at 7:57

answered Jan 16, 2016 at 7:53

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

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

2 Comments

TheLearner Over a year ago

I cannot use the <table> tag because I already have an existing table on page to which these rows need to be appended. That's why I am only receiving the rows from the server.

Ibrahim Khan Over a year ago

tr cannot be nested inside div. It will not even been rendered if you not use table. @TheLearner

Siddharth · Accepted Answer · 2016-01-16 07:54:34Z

0

you are missing <table> tag in ur html, try this fiddle

 var return_data = '<div><table><tr><td>blah</td><td>more blah</td></tr><tr><td>blah</td><td>more blah</td></tr><tr><td>blah</td><td>more blah</td></tr></table><span id="morerows">1</span></div>';

answered Jan 16, 2016 at 7:54

Siddharth

8698 silver badges17 bronze badges

1 Comment

TheLearner Over a year ago

The <table> tag is not missing...I don't have it for a reason. Please see the edit in my question.

Collectives™ on Stack Overflow

Unable to loop through elements inside an HTML string using JQuery 2.1.4

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related