Получить все элементы, содержащие класс, с помощью querySelector

Question

Для изменения некоторых стилей в классе я использую querySelector():

el.querySelector('.fa fa-car').style.display = "none";

Это хорошо работает для одного элемента, но если есть больше элементов, содержащих этот класс, и я хочу изменить отображение на none для всех из них, эта команда удаляет только первое вхождение, оставляя следующие нетронутыми.

Я пытался сделать это с querySelectorAll():

 el.querySelectorAll('.fa fa-car').style.display = "none";

Но этот возвращает сообщение об ошибке:

html2canvas: TypeError: Невозможно установить свойство 'display' из неопределенного

есть идеи, как получить все элементы, содержащие определенный класс, и выполнить над ними операцию?

Answer 1

Вы можете выполнять все свои операции, повторяя вхождение этого класса и, конечно, с помощью некоторых предложений if.

$('.fa.fa-car').each(function(){
     $(this).css('color','white');
})

Answer 2

Метод Element querySelectorAll() возвращает статический (не действующий) NodeList, представляющий список элементов документа, которые соответствуют указанной группе селекторов.

Используйте Document.querySelectorAll(), чтобы получить все элементы. Затем используйте forEach(), чтобы установить стиль в каждом элементе:

var elList = documnet.querySelectorAll(.fa.fa-car);
elList.forEach(el => el.style.display = "none");

Обратите внимание: Некоторые старые версии IE (<8) не будут поддерживать <code>querySelectorAll(). В этом случае используйте Array.from(documnet.querySelectorAll(.fa.fa-car))

Answer 3

Используйте метод querySelectorAll () См. https://www.w3schools.com/jsref/met_document_queryselectorall.asp

Вы получаете ошибку, потому что querySelectorAll возвращает массив. Проанализируйте его, а затем используйте style.display

Answer 4

querySelectorAll() возвращает коллекцию элементов. Чтобы изменить их стиль, вы должны пройти через них.

Также обратите внимание, что ваш селектор кажется недействительным. Учитывая правила класса FontAwesome, я предполагаю, что вам нужно выбрать оба класса. Попробуйте это:

Array.from(el.querySelectorAll('.fa.fa-car')).forEach(function() {
  this.style.display = "none";
});

В качестве альтернативы, поскольку вы пометили вопрос с помощью jQuery, вы можете просто упростить все это до:

$('.fa.fa-car').hide();

Answer 5

querySelector выберите только один элемент, чтобы выбрать все элементы, вы можете использовать querySelectorAll

[].map.call(el.querySelectorAll('.fa fa-car'), n => { n.style.display = 'none'; })