Question

我有一个工作函数，它查找输入字段中输入的字符，并在其上添加一个带有高亮类的span元素。

ATM我试图将函数的jQuery部分重写为Vanilla JS，我正在遇到一些问题。例如，我尝试使用类似于：$('.search-suggest__list--categories .search-suggest__highlight')的vanilla JS querySelector替换以下document.querySelector('.search-suggest__list--categories .search-suggest__highlight');，但是当我运行代码时，我返回了.each() is not a function。

我也有一些问题需要了解$（this）.html在Vanilla JS中的含义。

这是我的功能：

var search_value = document.getElementsByClassName('js-search-suggest-input')[0].value;

if(search_value.length !== 0){
    $('.search-suggest__list--categories .search-suggest__highlight').each(function(){
        var search_regexp = new RegExp(search_value, "g");
        $(this).html($(this).html().replace(search_regexp,"<span class='highlight'>"+search_value+"</span>"));
    });
}

Answer 1

使用querySelectorAll获取所提供选择器的所有元素。
使用forEach循环播放它们 - each是jQuery函数，forEach位于NodeList.prototype
this.innerHTML相当于$(this).html()。 - innerHTML read

这应该足以让您完成任务。

将jQuery重写为Vanilla JS，querySelector和$（this）.html

1 个答案: