jQuery parents() having different outputs in Firefox and Chrome

Question

I am trying to obtain the innerText of a 'TD' element by using jQuery's parents() and find().

allTitles = $("[href='/myLink/param?foo=1234']").parents("table:first").parents("table:first").find(".field_text");
name = allTitles[0].children[0].innerText;
console.log(name);

The code works fine in Chrome, but in Firefox the console prints out "null".

I did some debugging and the problem seems to be in the parents() function. While in Chrome I get all the attributes from the table elements, in Firefox it seems like the attributes are not being read and therefore resulting in "null" when we call find(".field_text").

Why does Chrome and Firefox behave differently event though I am using the same jQuery file?

Can include `html` t Question ?, create stacksnippets to demonstrate ? — guest271314, Nov 13 '15 at 11:34
It could be because of some invalid HTML markup differently parsed on each browser — A. Wolff, Nov 13 '15 at 11:34

score 0 · Answer 1 · answered Nov 16 '15 at 09:18

JavaScript is handled differently in browsers. It could be to do with with that. As you are already using jQuery, you could just carry on using it for your second query. Also if you are in control of your HTML, you can make your first query a lot simpler by adding a class to the second parant table:

var allTitles = $("[href='...']").closest(".your-class").find(".field_text");
var name = allTitles.children().first().text();
console.log(name);

score 0 · Accepted Answer · edited May 23 '17 at 11:59

0

The problem was actually with children.innerText, it doesn't work with Firefox.

Just changed to children.textContent and it solved the problem.

Reference: children.innerText is not working in firefox

edited May 23 '17 at 11:59

Community

1
1

answered Nov 16 '15 at 16:55

RafaelCT

85
2
6

jQuery parents() having different outputs in Firefox and Chrome

2 Answers2