使用Javascript Fiddle

Question

我是一个新的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()

并且仅将列表中的第一项分组

Answer 1

您所做的事情很奇怪。我认为您应该花一些时间为变量命名。来信对了解您要处理的内容不是很好。

然后，尝试了解代码的每一行，您究竟做了什么。

这是您的问题的解决方案，希望对您有所帮助：

const underScored = () => {
  const lis = [];
  
  // Let's store HTML elements in an array to use them easier later.
  for(const item of document.querySelectorAll('li')) {lis.push(item);}
  
  // First, let's build groups of items.
  const groupsOfUnderscoreItem = lis.filter(li => li.textContent.startsWith('_')).reduce((acc, item) => {
    const href = item.querySelector('a').getAttribute('href');
    const root = href.substring(0, href.lastIndexOf('-'));
    acc[root] = acc[root] || [];
    acc[root].push(item);
    return acc;
  }, {});
  
  // Then, let's perform the modifications to the HTML DOM.
  Object.keys(groupsOfUnderscoreItem).forEach(group => {
    const newList = document.createElement("ul");
    newList.classList.add('sub-nav');
    const rootElt = document.querySelector(`a[href='${group}']`);
    groupsOfUnderscoreItem[group].forEach(li => {
      newList.appendChild(li);
      const a = li.querySelector('a');
      a.textContent = a.textContent.substring(1);
    });
    rootElt.parentNode.appendChild(newList);
  });
};

underScored();

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

Answer 2

使用Javascript Fiddle

var dom = "";
var next = false;
var selected = document.querySelectorAll('.prime-nav li'); 
var len = selected.length - 1;

selected.forEach(function(elem, index) {
  var text = elem.innerText;
  if (text.startsWith('_')) {
  	elem = elem.outerHTML.replace('>_', '>');
    var prepend = "";
    if (!next)
      prepend = "<ul class='sub-nav'>";
    dom += prepend+elem;
    next = true;
  } else {
    if (next)
      dom += "</ul>";
    dom += elem.outerHTML;
    next = false;
  }
  if (next & index == len) {
    dom += "</ul>";
  }

});
document.getElementsByClassName("prime-nav")[0].innerHTML = dom;

<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>
  <li><a href='/item-2'>Item2</a></li>
  <li><a href='/item-3'>Item3</a></li>
  <li><a href='/item-1'>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>
</ul>

使用Jquery

这是我fiddle的工作方式：

var dom = "";
var next = false;
var len = $('.prime-nav li a').length - 1;
$('.prime-nav li a').each(function(index) {
  var text = $(this).text();
  var _li = $(this).parents('li');
  if (text.startsWith('_')) {
    $(this).text(text.replace('_', ''));
    var prepend = "";
    if (!next)
      prepend = "<ul class='sub-nav'>";
    dom += prepend + _li[0].outerHTML
    _li.remove();
    next = true;
  } else {
    if (next)
      dom += "</ul>";
    dom += _li[0].outerHTML;
    next = false;
  }
  if (next & index == len) {
    dom += "</ul>";
  }

});
$('.prime-nav').html(dom);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
  <li><a href='/item-2'>Item2</a></li>
  <li><a href='/item-3'>Item3</a></li>
  <li><a href='/item-1'>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>
</ul>

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

2 个答案:

使用Javascript Fiddle

使用Jquery