我只是尝试将 jQuery 方法转换为 VanillaJS,如下所示。
jQuery:
elements.parent(".item").removeClass("item");
Vanilla :
var parent = elements.parentNode;
parent.querySelector(".item").classList.remove('item');
但 Vanilla 脚本的工作方式与 jQuery 不同。有人请提出任何更好的解决方案。
最佳答案
鉴于 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"); });
});
关于javascript - 我们如何转换 jQuery remove class from parent in VanillaJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45785556/