javascript 过滤器功能在 IE 11 中不起作用，但在 Chrome 和 Mozilla 中运行良好

Question

过滤器功能在 IE 11 Edge 中不工作，但在 Chrome 中工作正常 和 Mozilla 。我正在处理以下代码

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

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

我在下面的 html 中获取值

<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>

所以，我也需要通过 IE Edge 中的样式获取 6m 值

Answer 1

感谢大家的快速响应我通过使用属性属性解决了这个问题

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

Answer 2

实际上，我们可以提取一个filter 函数并使用纯JavaScript 甚至通过NodeList 类型进行迭代：

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>

在 Edge、Firefox 和 Chrome 中测试。

Answer 3

jQuery 的.filter(function) 根据您的函数返回一个元素子集。如果你想访问结果子集中的第一个元素，你应该使用.first() 例如：

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

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

如果结果子集中有多个元素，您可以使用.map(function) 例如：

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

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

您可能还想使用String.trim() 修剪返回的文本，例如： .text().trim();