Filter function is not working in IE 11 Edge but its working fine in Chrome and Mozilla .I am working on below code

var data = $(".chartsValue text");

var filteredData=data.filter(function()
 { return $(this).css('font-weight') == 'bold';
 }).text();

I am getting the value in html like below

<g class="chartsValue" style="cursor:pointer;text-align:center;" transform="translate(101,10)">
<rect x="0" y="0" width="19" height="16" strokeWidth="0" fill="none" rx="0" ry="0">
</rect>
<text x="0.828125" zIndex="1" style="font-size:11;font-weight:bold;color:black;fill:black;" y="14">
6m
</text>

So, I need to fetch 6m value through style in IE Edge too

Filter function is not working in IE 11 Edge but its working fine in Chrome and Mozilla .I am working on below code

var data = $(".chartsValue text");

var filteredData=data.filter(function()
 { return $(this).css('font-weight') == 'bold';
 }).text();

I am getting the value in html like below

<g class="chartsValue" style="cursor:pointer;text-align:center;" transform="translate(101,10)">
<rect x="0" y="0" width="19" height="16" strokeWidth="0" fill="none" rx="0" ry="0">
</rect>
<text x="0.828125" zIndex="1" style="font-size:11;font-weight:bold;color:black;fill:black;" y="14">
6m
</text>

So, I need to fetch 6m value through style in IE Edge too

• javascript
• jquery
• html
• css

• Have you tried using native objects as opposed to jQuery wrapped objects? There might be a bug in jQuery for IE11 – Daniel Cooke Commented May 2, 2017 at 9:22
• 1 Thanks @DanielCooke I believe $(this).css doesn't work in beltter way in IE – user2147163 Commented May 2, 2017 at 12:31

3 Answers 3

Thanks Guys for the quick response I solved this problem by using attribute property

var filteredData =data.filter(function()
{
    return $(this).attr('style').indexOf('bold') > -1;
}).text();

Actually, we can extract a filter function and iterate even through NodeList type with pure JavaScript:

const els = document.querySelectorAll('g.chartsValue text');

const filter = fn => x => Array.prototype.filter.call(x, fn);

const r = filter(e => e.style['font-weight'] === 'bold')(els).map(x => x.innerText)

console.log(r)

<g class="chartsValue" style="cursor:pointer;text-align:center;" transform="translate(101,10)">
<rect x="0" y="0" width="19" height="16" strokeWidth="0" fill="none" rx="0" ry="0">
</rect>
<text x="0.828125" zIndex="1" style="font-size:11;font-weight:bold;color:black;fill:black;" y="14">
6m
</text>
</g>

Tested in Edge, Firefox and Chrome.

jQuery's .filter(function) returns a subset of elements based on your function. If you want to access the first element in the resulting subset you should use .first() e.g.:

var data = $(".chartsValue text");

var filteredData = data.filter(function () {
    return $(this).css("font-weight") === "bold";
}).first().text();

If there are multiple elements in the resulting subset you can use .map(function) e.g.:

var data = $(".chartsValue text");

var filteredData = data.filter(function () {
    return $(this).css("font-weight") === "bold";
}).map(function () {
    return $(this).text();
});

You might also want to trim the text you get back using String.trim() e.g.: .text().trim();