检查项目是否有下划线，然后使用javascript创建子菜单

我是一名新的javascript编程人员，我想编写一个脚本，该脚本可以创建一个下拉菜单，在文本之前自动添加下划线：

<ul class='prime-nav'>
 <li><a href='/'>Home</a></li>
 <li><a href='/item-1'>Item1</a></li>
  <li><a href='/item-1-1'>_Sub-Item 1</a></li>
  <li><a href='/item-1-2'>_Sub-Item 2</a></li>
  <li><a href='/item-1-3'>_Sub-Item 3</a></li> <!-- Underscored item -->
 <li><a href='/item-2'>Item2</a></li>
 <li><a href='/item-3'>Item3</a></li>
 <li><a href='/item-4'>Item4</a></li>
  <li><a href='/item-4-1'>_Sub-Item 1</a></li>
  <li><a href='/item-4-2'>_Sub-Item 2</a></li>
  <li><a href='/item-4-3'>_Sub-Item 3</a></li> <!-- Underscored item -->
</ul>

然后使用javascript检查项目是否有下划线，然后创建如下下拉列表

<ul class='prime-nav'>
 <li><a href='/'>Home</a></li>
 <li><a href='/item-1'>Item1</a>
 <ul class='sub-nav'>
  <li><a href='/item-1-1'>Sub-Item 1</a></li>
  <li><a href='/item-1-2'>Sub-Item 2</a></li>
  <li><a href='/item-1-3'>Sub-Item 3</a></li> <!-- Underscore remove -->
 </ul>
 </li>
 <li><a href='/item-2'>Item2</a></li>
 <li><a href='/item-3'>Item3</a></li>
 <li><a href='/item-1'>Item4</a>
 <ul class='sub-nav'>
  <li><a href='/item-4-1'>Sub-Item 1</a></li>
  <li><a href='/item-4-2'>Sub-Item 2</a></li>
  <li><a href='/item-4-3'>Sub-Item 3</a></li> <!-- Underscore remove -->
 </ul>
 </li>
</ul>

function underScored(){
  var a = document.querySelector(".prime-nav"),
      b = document.querySelectorAll(".prime-nav>li"),
      d = document.createElement("ul");
  for(var i = 0 ; i < b.length; i++){
    var e = b[i].querySelector("a");
    if(e.textContent.indexOf("_")>-1){
      d.appendChild(b[i])
    }
    b[i].appendChild(d)
  }
}
underScored()

我也试过这样的方法

<ul class='prime-nav'>
 <li><a href='/'>Home</a></li>
 <li><a href='/item-1'>Item1</a>
 <ul class='sub-nav'>
  <li><a href='/item-1-1'>Sub-Item 1</a></li>
  <li><a href='/item-1-2'>Sub-Item 2</a></li>
  <li><a href='/item-1-3'>Sub-Item 3</a></li> <!-- Underscore remove -->
 </ul>
 </li>
 <li><a href='/item-2'>Item2</a></li>
 <li><a href='/item-3'>Item3</a></li>
 <li><a href='/item-1'>Item4</a>
 <ul class='sub-nav'>
  <li><a href='/item-4-1'>Sub-Item 1</a></li>
  <li><a href='/item-4-2'>Sub-Item 2</a></li>
  <li><a href='/item-4-3'>Sub-Item 3</a></li> <!-- Underscore remove -->
 </ul>
 </li>
</ul>

function underScored(){
  var a = document.querySelector(".prime-nav"),
      b = document.querySelectorAll(".prime-nav>li"),
      d = document.createElement("ul");
  for(var i = 0 ; i < b.length; i++){
    var e = b[i].querySelector("a");
    if(e.textContent.indexOf("_")>-1){
      d.appendChild(b[i])
    }
    b[i].appendChild(d)
  }
}
underScored()

而且它只是使用Javascript将列表中的第一项分组

var dom=； var-next=false； 所选变量=document.queryselectoral'.prime nav li'； var len=所选。长度-1； selected.forEachfunctionelem，index{ var text=elem.innerText； 如果文本以“”开头{ elem=elem.outerHTML.replace'>"，'>'； var prepend=； 如果！下一个 前置=； dom+=前置+元素； next=真； }否则{ 如果下一个 dom+=； dom+=elem.outerHTML； 下一个=假； } 如果next&index==len{ dom+=； } }; document.getElementsByClassNameprime nav[0].innerHTML=dom；

---

你做的很奇怪。我认为您应该花一些时间为变量命名。信不是很好理解你在处理什么

然后，试着理解你的每一行代码，你到底做了什么

以下是您问题的解决方案，我希望它能帮助您：

常数==>{ 常数lis=[]； //让我们将HTML元素存储在一个数组中，以便以后更容易地使用它们。 forconst document.queryselectoral'li'{lis.pushitem；} //首先，让我们构建项目组。 const groupsofUnderlineItem=lis.filterli=>li.textContent.startsWith'''uu'.reduceAC，item=>{ const href=item.querySelector'a'.getAttribute'href'； const root=href.substring0，href.lastIndexOf'-'； acc[根]=acc[根]| |[]； acc[root].pushitem； 返回acc； }, {}; //然后，让我们对HTMLDOM进行修改。 Object.KeysGroupsOfUnderlineItem.forEachgroup=>{ const newList=document.createElementul； 添加'sub-nav'； const rootElt=document.querySelector`a[href='${group}']`； GroupSoFeItem[group]。forEachli=>{ newList.appendChildli； 常数a=li.querySelector'a'； a、 textContent=a.textContent.substring1； }; rootElt.parentNode.appendChildnewList； }; }; 强调；

---

你试过什么？在这里，我们帮助您使代码正常工作，而不是为您编写代码。您必须编写一些代码，遇到问题，然后来寻求帮助。感谢您的回复，我将编辑此帖子顺便问一下，您如何确定将哪些子元素组合在一起？它们在href中必须具有相同的根？比如，让我们分组/item-4-*？我试过了，但它是分组所有项目都强调了你仍然需要向我们展示你的尝试。这就是我想要的，非常感谢你，我只是一个新的javascript你知道。谢谢你Rajan你能把子菜单移到标签里面吗？当然，我能，但你不能！下次试试你自己：这是你需要的。请更新我的答案好的，下次你找到正确的更新答案时，我会亲自尝试，但你的解决方案下拉菜单项没有链接href:v:o，我会检查，我以前收到过，但最近一定弄坏了。@Đứ中心ần修正！您可以在标签内移动子导航元素吗？我需要做一个下拉列表：你能在父元素中移动子导航吗？