-2

I encountered a slight problem. My jQuery code works as expected in Firefox and Chrome but not in IE11. Not sure why it's not working.

Here is my HTML, CSS and jQuery:

let nodes = $('h2').contents().filter(function(i, node) {
  return node.nodeType === 3;
});
Array.from(nodes).forEach(function(n) {
  return n.nodeValue = n.nodeValue.trim();
});
h2 img {
  width: 31px;
  height: 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h2>This is a test <img class="test" src="https://www.iconsdb.com/icons/preview/red/new-xxl.png" alt="test" /></h2>
<h2>This is another test <img class="test" src="https://www.iconsdb.com/icons/preview/red/new-xxl.png" alt="test" /></h2>
<h2>foo bar <img class="test" src="https://www.iconsdb.com/icons/preview/red/new-xxl.png" alt="test" /></h2>

Would like it to work in IE11 as well. Any help is appreciated.

John
  • 35
  • 7
  • And what makes you think this is a jQuery problem? You barely use any jQuery here. What error does the dev console show? – gre_gor Jan 19 '22 at 21:12
  • I went ahead and created a code snippet. No error. works as expected in Chrome and Firefox and Chrome just not in IE11. As you can see when the snippet is ran it produces the output but not in IE11. – John Jan 19 '22 at 21:18

1 Answers1

1

Array.from is not supported in Internet Explorer.

As you use jQuery, just call .each on the nodes collection:

nodes.each(function(_, n) {
  n.nodeValue = n.nodeValue.trim();
});
trincot
  • 317,000
  • 35
  • 244
  • 286