jQuery parents() having different outputs in Firefox and Chrome [duplicate]

December 10, 2016, at 3:11 PM

This question already has an answer here:

  • 'innerText' works in IE, but not in Firefox 15 answers

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;

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?

Answer 1

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();
Answer 2

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

Access the value assigned to the clicked submit button with JavaScript

Access the value assigned to the clicked submit button with JavaScript

I noticed one pecular thingWhen there are several submit buttons in your HTML form like so:

JavaScript Messed up OnChange File Input

JavaScript Messed up OnChange File Input

I do not understand why web technology is so messed upI am trying to accomplish something really easy