根据IF条件更改所有元素的css

Question

我试图通过Chrome扩展程序“自定义Javascript”

隐藏本网站上的一些li元素

我在本地文件上测试了我的代码，它只适用于第一个li：

var b = document.querySelector("span.price_value").innerHTML;
var processed = b.replace(/ /g, '');
var output = parseInt(processed, 10);
if (output >= 5000) {
    document.querySelector(".item").style.display = "none";
}

如何更改符合该条件的所有li元素的css属性？

querySelectorAll只返回一个未定义的错误。

Answer 1

当您标记为jquery时，您可以使用.filter(fn)获取所有span.price_value元素传递测试条件，然后使用.closest()将祖先元素定位到{{1} }

.hide()

Answer 2

您希望使用querySelectorAll返回节点列表，而不是querySelector，它返回它找到的第一个节点。

你需要使用某种“用于”的方式。循环以影响列表中的每个节点。

Answer 3

querySelector()返回与选择器匹配的第一个元素。您可以使用querySelectorAll()检索可以迭代的元素列表。

for (var item of document.querySelectorAll("span.price_value")) {
    var processed = item.innerHTML.replace(/ /g, '');
    var output = parseInt(processed, 10);
    if (output >= 5000) {
        item.style.display = "none";
    }
}

Answer 4

querySelectorAll返回项列表。迭代并设置每个元素都不显示。

var items = document.querySelectorAll(".item");
items.forEach(function(item) {
  item.style.display = "none"
});