javascript - 我们如何在 Vanilla JS 中转换 jQuery $i.find ('div.element:first' )

Question

querySelectorAll() 是否接受 ('div.element:first') 这种类型的参数？我需要在 VanillaJS 中转换以下 jQuery 方法

j查询:

$li = $(this)
$li.find('div.element:first')

Vanilla :

var li = event.target;
li.querySelectorAll('div.element:first');

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

Answer 1

jQuery 的 :first 将匹配元素的集合减少到集合中的第一个。

换句话说，您将获得与 div.element 匹配的第一个元素。

要在纯 javascript 中执行相同的操作，您所要做的就是调用 querySelector 而无需 All 部分

var first = li.querySelector('div.element');

因为 querySelector 无论如何都会返回匹配指定选择器的第一个元素

这当然只有在 li 是单个元素时才有效，querySelector 不像 jQuery 的 find() 那样在集合上起作用.

如果 li 不是单个元素，您必须迭代，但由于您只是在寻找第一个元素，您可以这样做

var first = li[0].querySelector('div.element');