我们如何在VanillaJS中转换jQueryn $ li.find('div.element:first')

Question

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

jQUery:

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

香草 :

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');