Используйте предопределенный массив строковых значений для querySelectorAll, чтобы выполнить определенное действие
Если у меня есть предопределенный массив строковых значений, как я могу узнать, существует ли какое-либо из них в DOM, с помощью querySelectorAll и textContent?
//my array of predefined string values
let primaries = ["house", "people", "cat", "dog"];
let mTable = document.querySelectorAll("#mytable td font");
вот здесь я и застрял... Я хочу найти любую строку от primaries до mTable. И если какое-либо строковое значение найдено, выполнить определенное действие (т. е. console.info("I found you"));
Это то, что у меня есть до сих пор, но оно работает только для одного элемента за раз. Как я могу расширить свой мыслительный процесс?
var mPrimary = Array.from(
mtable.querySelectorAll("td font")
).find((el) => el.textContent === "house");
if (mPrimary) {
mPrimary.closest("tr").classList.add("d-none");
}
Спасибо за этот совет! Да, я хочу расширить свое мышление и попытаться найти «любое» совпадение из массива строк.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Используйте метод Array.includes() для поиска текста в массиве.
И используйте .filter() вместо .find(), чтобы получить все совпадающие td. Затем вы можете использовать .forEach(), чтобы обработать их все.
var mPrimary = Array.from(mtable.querySelectorAll("td font")
).filter(
(el) => primaries.includes(el.textContent.trim())
);
mprimary.forEach(el => el.closest("tr").classList.add("d-none"));
Я добавил .trim(), чтобы окружающие пробелы не привели к сбою сопоставления.
Почему не цепь? Кроме того, на мой взгляд, Array.from более описателен, чем распространение.
Было бы здорово, если бы все объекты, подобные массиву, наследовали все методы обхода массива. Что касается цепочки, я решил сохранить структуру исходного кода. Присвоение имен непосредственным значениям может облегчить понимание кода.
зачем повторять дважды? mprimary.forEach(el => !primaries.includes(el.textContent.trim() && el.closest("tr").classList.add("d-none")) и избегайте filter
Это еще один способ сделать это. Опубликуйте это как ответ. @ХагайХарари
@HagaiHarari и даже document.querySelectorAll("#mytable td font").forEach(el => !primaries.includes(el.textContent.trim() && el.closest("tr").classList.add("d-none")), поскольку forEach IS поддерживается коллекцией, возвращаемой querySelectorAll
.find()вернет только первое совпадение. Разве тебе не нужны все спички?