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类='lvl-1'添加uniqe ID。我通过foreach循环执行此操作，然后将依赖于此ID的class ='lvl_2'的每个子类

元素添加到该子类中。例如：

<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

出于打印目的，我将ID指定给容器div，以便在附加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>

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

2 个答案: