将相同的类添加到子元素取决于 ul ID

Question

here is my 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>

Here is my problem. I want to add uniqe ID to every li class ='lvl-1'. I do this by foreach loop then I want add to every children

element of class='lvl_2' same class dependent on this ID. For example :

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

Sorry for my English I hope you can understand what I want to do. Thanks for help

Answer 1

If I understood correctly, this is the answer:

 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

For printing purpose I specified the id to the container div, in order to see the html itself after the ids were attached.Basically you can iterate through all <li> elements and set id=1 then for all childs of <ul> append a "-col" to the existing 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>