javascript - 我们如何转换 jQuery remove class from parent in VanillaJS

Question

我只是尝试将 jQuery 方法转换为 VanillaJS，如下所示。

jQuery:

elements.parent(".item").removeClass("item");

Vanilla :

var parent = elements.parentNode;
parent.querySelector(".item").classList.remove('item');

但 Vanilla 脚本的工作方式与 jQuery 不同。有人请提出任何更好的解决方案。

Answer 1

鉴于 elements 是复数，我假设它是一个集合，所以使用 .forEach()。 (这需要在旧版浏览器中进行修补，除非 elements 是实际的 Array)

elements.forEach(function(el) {
  el.parentNode.classList.remove("item");
});

请注意，您不需要仅过滤到 .item 元素。如果它没有类，它将是一个空操作。

另请注意，.querySelector 仅搜索后代。如果出于其他原因确实需要对类进行过滤，则可以使用 .matches。

elements.forEach(function(el) {
  var par = el.parentNode;
  if (par.matches(".item")) {
    // Do work with the `.item` element
    par.classList.remove("item");
  }
});

---

如果 .item 类可能有多个祖先，则在嵌套循环中遍历这些祖先。

elements.forEach(function(el) {
  var par = el.parentNode;
  do {
    if (par.matches(".item")) {
      // Do work with the `.item` element
      par.classList.remove("item");
    }
  } while((par = par.parentNode));
});

---

如果您经常这样做，您可以创建一个辅助函数。

function ancestors(el, filter) {
  var res = [];
  var par = el.parentNode;
  do {
    if (!filter || par.matches(filter)) {
      res.push(par);
    }
  } while((par = par.parentNode));

  return res;
} 

那么就是这样了。

elements.forEach(function(el) {
  ancestors(el, ".item")
    .forEach(function(par) { par.classList.remove(".item"); });
});