#javascript #variables
Вопрос:
У меня есть два поля навигации, в первом из которых есть класс CSS .one
, а второе пустое. Для первого окна навигации я задал границу с JavaScript, определив имя класса .one
. Но я тоже получаю границу для второго навигационного окна, хотя у него нет класса. Здесь я использую подход шаблонных литералов. Я знаю, что могу исправить это, используя имя класса непосредственно внутри querySelectorAll
метода следующим образом let li = document.querySelectorAll(".one gt; ul li");
. Но мне нужно решение для шаблонных литералов, которое наиболее полезно для меня, чтобы использовать и некоторые другие проекты. В основном мне нужно представить имя класса в виде переменной. Ниже приведен мой код. Кто-нибудь может мне в этом помочь. заранее спасибо!
let parents = document.querySelector(".one"); let li = document.querySelectorAll(`${parents.tagName} gt; ul li`); li.forEach((elem)=gt;{elem.style.border="1px solid red"});
nav {font-family:arial;width:15rem;} nav ul {list-style:none;padding:0;margin:1rem;padding-left:.5rem;} nav ul a {color:#777;text-decoration:none;padding:.5rem;}
lt;nav class="one"gt; lt;ulgt; lt;ligt;lt;a href="#"gt;Homelt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Aboutlt;/agt; lt;ulgt; lt;ligt;lt;a href="#"gt;Visionlt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Missionlt;/agt;lt;/ligt; lt;/ulgt; lt;/ligt; lt;ligt;lt;a href="#"gt;Contactlt;/agt;lt;/ligt; lt;/ulgt; lt;/navgt; lt;brgt; lt;navgt; lt;ulgt; lt;ligt;lt;a href="#"gt;Homelt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Aboutlt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Contactlt;/agt;lt;/ligt; lt;/ulgt; lt;/navgt;
Ответ №1:
Попробуйте заменить эту строку:
let li = document.querySelectorAll(`${parents.tagName} gt; ul li`);
с этим одним:
let li = parents.querySelectorAll(`ul li`);
Причина, по которой это не работает для вас так , как вы ожидали, заключается в том, что вы сопоставляете все элементы с помощью селектора запросов nav gt; ul li
внутри document
, и вы полностью игнорируете имя класса nav
тега, выбранного в parents
переменной.
В противном случае вы можете просто сделать это вместо этого:
let li = document.querySelectorAll(`.one gt; ul li`); li.forEach((elem)=gt;{elem.style.border="1px solid red"});
или просто используйте CSS:
.one gt; ul li { border: 1px solid red; }
или если вы хотите выбрать первый элемент (я не знаю, каковы ваши намерения, но я предполагаю, что в соответствии с вашим кодом):
.one:first-child gt; ul li { border: 1px solid red; }
Комментарии:
1. Привет, Славик, Спасибо за ваши предложения, я попробую с этим разобраться и свяжусь с вами, как только все будет закончено.
Ответ №2:
Не нужен JavaScript. Это может быть возможно только с помощью CSS.
.one gt; ul gt; li { border: 1px solid red}
или в вашем изменении JS
let li = document.querySelectorAll(`${parents.tagName} gt; ul gt; li`);