jQuery( ".myContent" ).hide()语句的 javascript 等价物是什么？

Question

我需要jQuery hide（）的javascript等效物。以下语句的 JavaScript 等效项是什么

jQuery(".myContent").hide()

Answer 1

在所有现代浏览器以及 IE8 上，您可以使用 querySelectorAll 来执行此操作，您经常发现它与 Array.prototype.forEach 或 Array.prototype.slice 一起发现：

Array.prototype.forEach.call(document.querySelectorAll(".myContent"), function(el) {
    el.style.display = "none";
});

它几乎得到普遍支持，略高于 IE8不支持的getElementsByClassName。（Array.prototype.forEach.call部分是给我们一种方便的方式来循环结果。

在适当的现代浏览器（或带有垫片）上，您可以将其与Array.from结合使用：

Array.from(document.querySelectorAll(".myContent")).forEach(function(el) {
    el.style.display = "none";
});

或者从技术上讲，您可以这样做：

Array.from（document.querySelectorAll（".myContent"）， function（el） { el.style.display = "none"; });

。因为Array.from接受映射函数。

无论哪种情况，为了简洁起见，您可能都希望给自己一个包装器函数。

---

如果你只需要隐藏该类的第一个元素，它querySelector：

// Assumes there *will* be a match, throws error if not
document.querySelector(".myContent").style.display = "none";

或

// Doesn't make that assumption
var el = document.querySelector(".myContent");
if (el) {
    el.style.display = "none";
}

Answer 2

var x = document.getElementsByClassName('myContent');
for (var i=0;i<x.length;i++){
  x[i].style.display = 'none';
}

隐藏该类的所有内容，没有jQuery。