搜索
搜索

如何使用JavaScript为LI下的UL元素生成相同的类名？

Script Host 发表于 Dev
15
脚本宿主

我尝试在ul元素中动态生成/创建类名，并且成功获得了预期的结果，可以在代码片段的控制台中看到以供参考。

但是，如果ul是在li元素下生成的，我会尝试创建相同的类名。例如，有一个li具有类名的元素，"a"如果我们ul在同一个元素下创建多个元素，li则类名ul应该与下面相同，而不是计算类。

我需要的结果：

<li class="a">
    <a href="/">First</a>
    <ul class="main-nav-list">
        <li class="b">
            <a href="/">Type of menu</a>
            <ul class="main-nav-list ul-1"> //The ul-1 should be static (even after dyanmic class generated) to the next ul li example if ul-1 one come the next li with ul should also have the same class ul-1
                <li class="c"><a href="/">Summer</a></li>
            </ul> 
        </li>
        <li class="b">
            <a href="/">Type of menu</a>
            <ul class="main-nav-list ul-1">
                <li class="c"><a href="/">Summer</a></li>
            </ul>
        </li>

到目前为止我尝试过的代码

var ul = document.querySelectorAll(".main-nav ul");

ul.forEach((each, i) => {
    each.classList.add("ul-" + i);
    console.log(each)
});
<nav class="main-nav">
  
  <ul class="main-nav-list">
    <li class="a">
      <a href="/">First</a>
      
      <ul class="main-nav-list"> 
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">// In my case, if the class is ul-1 then next li ul is generating as ul-2 but i want it to be same in the both the li component
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
      </ul>
    
    </li>
  </ul>

</nav>
在此处输入图片说明

如果第一个 Ul 具有 ul-0 类，那么下一个 ul 也应该具有 ul-0 作为一个类。任何帮助将不胜感激 ！！

赛义德

您必须选择每个li并为每个迭代其uls，然后将您想要的任何类添加到它们。

// selecting li's of main ul in the page
var lis = document.querySelectorAll(".main-nav>ul>li");

lis.forEach((each) => {

    // selecting all uls inside each li
    let innerUls = each.querySelectorAll(`:scope>ul`)


    // adding class name to each ul
    innerUls.forEach((itm, index) => {
      itm.classList.add("ul-" + index);
    })
});
<nav class="main-nav">
  
  <ul class="main-nav-list">
    <li class="a">
      <a href="/">First</a>
      
      <ul class="main-nav-list"> 
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">// In my case, if the class is ul-1 then next li ul is generating as ul-2 but i want it to be same in the both the li component
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
      </ul>
    
    </li>
    
    <li class="a">
      <a href="/">Second</a>
      
      <ul class="main-nav-list"> 
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">// In my case, if the class is ul-1 then next li ul is generating as ul-2 but i want it to be same in the both the li component
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
      </ul>
      
      <ul class="main-nav-list"> 
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">// In my case, if the class is ul-1 then next li ul is generating as ul-2 but i want it to be same in the both the li component
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
      </ul>
      
      <ul class="main-nav-list"> 
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">// In my case, if the class is ul-1 then next li ul is generating as ul-2 but i want it to be same in the both the li component
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
      </ul>
    </li>
  </ul>
</nav>

更新

以ul递归方式将类添加到s

let classNames = ['a', 'b', 'c', 'd', 'e'];
function addClassToUls(ul, level) {
  var lis = ul.querySelectorAll(':scope>li');
  lis.forEach((each) => {

    // selecting all uls inside each li
    let innerUls = each.querySelectorAll(`:scope>ul`)


    // adding class name to each ul
    innerUls.forEach((itm, index) => {
      itm.classList.add(`ul-${level}-${classNames[index]}`);
      addClassToUls(itm, level+1);
    })
  })
}

let mainUls = document.querySelectorAll(".main-nav>ul");

mainUls.forEach(ul => addClassToUls(ul, 1))
<nav class="main-nav">

  <ul class="main-nav-list">
    <li class="a">
      <a href="/">First</a>

      <ul class="main-nav-list">
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">// In my case, if the class is ul-1 then next li ul is generating as ul-2 but i want it to be same in the both the li component
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
      </ul>

    </li>

    <li class="a">
      <a href="/">Second</a>

      <ul class="main-nav-list">
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">// In my case, if the class is ul-1 then next li ul is generating as ul-2 but i want it to be same in the both the li component
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
      </ul>

      <ul class="main-nav-list">
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">// In my case, if the class is ul-1 then next li ul is generating as ul-2 but i want it to be same in the both the li component
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
      </ul>

      <ul class="main-nav-list">
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">// In my case, if the class is ul-1 then next li ul is generating as ul-2 but i want it to be same in the both the li component
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
        <li class="b">
          <a href="/">Type of menu</a>

          <ul class="main-nav-list">
            <li class="c"><a href="/">Summer</a></li>
          </ul>

        </li>
      </ul>
    </li>
  </ul>
</nav>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用 jquery 或 javascript 计算类相同但在特定 <ul> 内的 html 元素

如何在没有任何ID的情况下以javascript DOM中的ul和li为目标元素

如何使用类Javascript删除现有ul中的li

如何在具有相同类名的ul列表中追加li元素？

如何使用java在硒中查找和列出ul li标签下的元素，ul li在div下？

使用javascript将css类添加到ul中的所有li父元素

如何在不使用ID的情况下将ul定位为li？

如何使用beautifulsoup获取没有任何类或id的特定ul元素li的文本和href

如何在ul> li中查找所有类名

如何使用BeautifulSoup提取<ul class = ...>下的<li>下的值

如何在 Li 元素中为 createTextNode() tekst 选择或提供类名

如何使用javascript在ul中循环li

单击提交按钮时如何使用JavaScript将li元素添加到ul

如果 ul 没有使用 jquery 或 javascript 的类，如何隐藏 li

如何使用javascript for loop按类名获取元素宽度？

如何使用for循环使<ul>元素每两个<li>？

如何使用JQuery替换<ul>的所有<li>元素？

如何在特定的“ul”元素下获取多个“li”元素并将它们放入数组中？

如何使用jQuery将HTML`<li>`前缀为`<ul>`？

即使使用Selenium和Python有多个具有相同类名的元素，也如何通过类名识别元素

当其他li设置为ul时，如何从ul设置为inline-block的ul中的第一个li元素中删除边距

使用 Javascript 用类名填充元素

如何使用javascript定位li中的元素

使用html敏捷包获取div类下的ul li项

JavaScript无法将焦点设置为ul中的第一个li元素

如何获取所有 li 元素在 ul 中具有类展示技能

如何仅遍历ul中的li元素

如何从UL LI元素正确提交表单？

如何添加类 li 包装 ul

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档