Question

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

jQuery：

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

香草：

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"); });
});

我们如何在VanillaJS中从父级转换jQuery remove class

1 个答案: