將相同的類添加到子元素取決於 ul ID

Question

這是我的 HTML

 let allElements = document.querySelectorAll("div.menu_sub_box ul.lvl_1 > li"); allElements.forEach((el, index) => { console.log(el); let id = (el.id = index + 1); });

 <div class="menu_sub_box"> <ul class="lvl_1"> <li> <a class="lvl_1" href="abc">val 1</a> <ul class="lvl_2"> <li><a href="item1">Item 1 content</a></li> <li><a href="item2">Item 1 content</a></li> <li><a href="item2">Item 1 content</a></li> </ul> </li> <li> <a class="lvl_1" href="abc">val 2</a> <ul class="lvl_2"> <li><a href="item1">Item 1 content</a></li> <li><a href="item2">Item 1 content</a></li> <li><a href="item2">Item 1 content</a></li> </ul> </li> </ul> </div>

這是我的問題。 我想為每個 li class ='lvl-1' 添加 uniqe ID。 我通過 foreach 循環來做到這一點，然后我想添加到每個孩子

class='lvl_2' 相同類的元素取決於此 ID。 例如 ：

 <ul class="lvl_1"> <li id='1'> <a class="lvl_1" href="abc">val 1</a> <ul class="lvl_2"> <li class='1-col'><a href="item1">Item 1 content</a></li> <li class='1-col'><a href="item2">Item 1 content</a></li> <li class='1-col'><a href="item2">Item 1 content</a></li> </ul> </li> <li id='2'> <a class="lvl_1" href="abc">val 2</a> <ul class="lvl_2"> <li class='2-col'><a href="item1">Item 1 content</a></li> <li class='2-col'><a href="item2">Item 1 content</a></li> <li class='2-col'><a href="item2">Item 1 content</a></li> </ul> </li> </ul>

對不起我的英語我希望你能理解我想做什么。 感謝幫助

Answer 1

如果我理解正確，這就是答案：

 let liElements = document.querySelectorAll("div.menu_sub_box ul.lvl_1 > li"); liElements.forEach((el, index) => { let id = (el.id = index + 1); el.id = id; let cols = el.querySelectorAll("li"); cols.forEach((col) => { col.className = (index + 1) + "-col"; }) })

 <div class="menu_sub_box" id="menu_sub_box"> <ul class="lvl_1"> <li> <a class="lvl_1" href="abc">val 1</a> <ul class="lvl_2"> <li><a href="item1">Item 1 content</a></li> <li><a href="item2">Item 1 content</a></li> <li><a href="item2">Item 1 content</a></li> </ul> </li> <li> <a class="lvl_1" href="abc">val 2</a> <ul class="lvl_2"> <li><a href="item1">Item 2 content</a></li> <li><a href="item2">Item 2 content</a></li> <li><a href="item2">Item 2 content</a></li> </ul> </li> <li> <a class="lvl_1" href="abc">val 3</a> <ul class="lvl_3"> <li><a href="item1">Item 3 content</a></li> <li><a href="item2">Item 3 content</a></li> <li><a href="item2">Item 3 content</a></li> </ul> </li> </ul> </div>

Answer 2

出於打印目的，我指定了容器 div 的 id，以便在附加 id 后查看 html 本身。基本上，您可以遍歷所有<li>元素並設置id=1然后為<ul>附加一個"-col"到現有ID。

 let lis = document.querySelectorAll("div.menu_sub_box ul.lvl_1 > li"); lis.forEach((element, index) => { const id_cols = element.querySelectorAll("li"); element.id = index + 1; id_cols.forEach((column) => { column.className = (index + 1) + "-col"; }) }) console.log(document.getElementById("menu_sub_box").innerHTML)

 <div class="menu_sub_box" id="menu_sub_box"> <ul class="lvl_1"> <li> <a class="lvl_1" href="abc">val 1</a> <ul class="lvl_2"> <li><a href="item1">Item 1 content</a></li> <li><a href="item2">Item 1 content</a></li> <li><a href="item2">Item 1 content</a></li> </ul> </li> <li> <a class="lvl_1" href="abc">val 2</a> <ul class="lvl_2"> <li><a href="item1">Item 2 content</a></li> <li><a href="item2">Item 2 content</a></li> <li><a href="item2">Item 2 content</a></li> </ul> </li> <li> <a class="lvl_1" href="abc">val 3</a> <ul class="lvl_3"> <li><a href="item1">Item 3 content</a></li> <li><a href="item2">Item 3 content</a></li> <li><a href="item2">Item 3 content</a></li> </ul> </li> </ul> </div>