Как упростить параметр querySelectorAll с использованием значения другого querySelectorAll

Question

я следующим:

var searchSuggestionsItems = document.querySelectorAll("#search-user-results .live-search-results--list li"); 

И хочет использовать этот селектор для всех выбранных a элементов, которые имеют .overedSuggestion класс. Я знаю, что должно работать следующее:

var selectedSuggestion = document.querySelectorAll("#search-user-results .live-search-results--list li a.overedSuggestion"); 

Но я ищу упрощенный способ сделать. То, что я пробовал:

selectedSuggestion = document.querySelectorAll(searchSuggestionsItems+' a.overedSuggestion'); 

это возвращает следующее сообщение об ошибке:

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '[object NodeList] a.overedSuggestion' is not a valid selector. 

Answer 1

Это потому, что вы конкатенации в NodeList коллекцию строки. NodeList преобразуется в строку [object NodeList], которая не является допустимым/значимым селектором.

DOM элементы также имеют .querySelectorAll метод, так что вы можете написать:

searchSuggestionsItems[0].querySelectorAll('a.overedSuggestion'); 

выше фрагмент кода возвращает a.overedSuggestion потомков первого элемента в списке узлов. Для получения потомков всех элементов в списке вам необходимо выполнить итерацию по списку, который неэффективен. Использование более длинного селектора более эффективно.

Ваш код будет работать, если searchSuggestionsItems был селектор, т.е .:

var searchSuggestionsItems = "#search-user-results .live-search-results--list li";