时间戳

首页 > 解决方案 > javascript 等效于 jquery 所有子选择器

javascript - javascript 等效于 jquery 所有子选择器

问题描述

我有以下 jquery 选择器，我正在尝试将其转换为常规 javascript。

$("#lelement>*").on("dblclick", function(){
});

普通 javascript 的等价物是什么？我可以这样做吗？

document.getElementById('element').childNodes.addEventListener("dblclick", function(e){
});

标签： javascriptjquery

解决方案

您必须显式迭代与#lelement>*选择器匹配的所有元素（可以使用 获取集合querySelectorAll），然后将处理程序附加到每个元素：

document.querySelectorAll('#lelement > *').forEach((child) => {
  child.addEventListener('dblclick', () => console.log('double clicked!'));
});
<div id="lelement">
  <div>content 1</div>
  <div>content 2</div>
</div>

请注意，这NodeList.forEach并不是一种古老的方法。并非所有浏览器都支持它。因此，对于古老的浏览器，请使用 polyfill 或Array.prototype.forEach代替：

Array.prototype.forEach.call(
  document.querySelectorAll('#lelement > *'),
  (child) => {
    child.addEventListener('dblclick', () => console.log('double clicked!'));
  }
);
<div id="lelement">
  <div>content 1</div>
  <div>content 2</div>
</div>

推荐阅读