Блог

У меня есть два поля навигации, в первом из которых есть класс 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; 

Попробуйте заменить эту строку:

 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; }  

Не нужен JavaScript. Это может быть возможно только с помощью CSS.

 .one gt; ul gt; li { border: 1px solid red}  

или в вашем изменении JS

 let li = document.querySelectorAll(`${parents.tagName} gt; ul gt; li`);