Pure JavaScript alternative to jQuerys .find

Pure JavaScript alternative to jQuerys .find

本文关键字：jQuerys find to alternative JavaScript Pure      更新时间：2023-09-26

我在jQuery中有这个：

$(document).bind("click touchstart", function(e) {
if (e.target.class != searchControls && !searchControls.find(e.target).length) {
 //do something
});
});

这样做的目的是检查点击，如果它不是搜索元素，也不是该元素的子元素，那么我可以运行一些东西。我想做的是找到一个纯JavaScript的替代方案。

到目前为止，我有：

var searchTrigger = document.querySelector(".header__search-btn"),
    productSearch = document.querySelector(".product-search"),
    searchControls = document.querySelectorAll(".product-search__positioner");
document.onclick = function (e) {
 if (e.target.class != searchControls && e.parentNode != searchControls)
   // do something
 }
}

然而，这仍然在if语句中激发了我的函数，所以很明显我错了——不确定错了多少。感谢您的帮助。

没有e.target.class。如果你正在检查类名，那么它应该是

e.target.className

然后检查父元素类名

 e.target.parentNode.className

如果您希望在父节点内部进行搜索，请使用

e.target.parentNode.querySelector("pass your selector here")

如果只想搜索子元素：

e.target.querySelector("pass your selector here")

document.querySelectorAll返回DOM元素的集合。e.target.class != searchControls没有意义（忽略target.class根本不存在）：假设你指的是className，你试图将字符串与DOM元素列表进行比较。这将永远是false。

所以让我们忽略这一部分，看看e.parentNode != searchControls。事件对象没有属性parentNode。同样，即使您指的是e.target.parentNode，也没有多大意义，因为您正在测试单个元素是否与元素列表相同。

根据您对.find的使用，您基本上想知道一个节点是否包含在另一个节点中。每个DOM节点都有一个方法.contains，所以您所要做的就是迭代DOM元素的集合并调用该方法：

var contained = false;
for (var i = 0; i < searchControls.length; i++) {
    if (searchControls[i].contains(e.target)) {
        contained = true;
        break;
    }
}

这可以很容易地转移到它自己的可重用功能中。

相关文章：