Convert HTML List to a List with Dropdown Menu-CodePudding

I have an HTML list, and I want to create a new list out of it to support dropdown if some items start with -.

It works fine if the list items that start with - are in the middle of the list but not if these items are the latest ones.

let dropDown_list = [],
    latest_navigation_item,
    navigation_list = document.querySelectorAll('.c-nav .c-nav__item');

  navigation_list.forEach(function(item) {
    if (item.childNodes[1].innerText.startsWith('-')) {
      dropDown_list.push(item);
    } else {
      if (dropDown_list.length > 0) {
        let dropDown = document.createElement('ul');
        dropDown.className = 'c-nav__dropDown';

        dropDown_list.forEach(function(dropDown_item) {
          dropDown_item_text = dropDown_item.childNodes[1].innerText;
          dropDown_item.childNodes[1].innerText = dropDown_item_text.replace('-', '');
          dropDown.append(dropDown_item);
        });

        latest_navigation_item.className  = ' c-nav__item--hasDropDown';
        latest_navigation_item.append(dropDown);
      }

      latest_navigation_item = item;
      dropDown_list = [];
    }
  });

<ul >
  <li >
    <a href="http://localhost:2369/latest/" >Latest</a>
  </li>
  <li >
    <a href="http://localhost:2369/authors/" >Authors</a>
  </li>
  <li >
    <a href="http://localhost:2369/tag/politics/" >- Politics</a>
  </li>
  <li >
    <a href="http://localhost:2369/tag/covid/" >Covid</a>
  </li>
  <li >
    <a href="http://localhost:2369/tag/history/" >- History</a>
  </li>
  <li >
    <a href="http://localhost:2369/tag/technology/" >- Technology</a>
  </li>
</ul>

Is there anything I can fix this?

CodePudding user response：

Here's another straight forward approach:

var dropDown_list = [],
    latest_navigation_item,
    nav_list = document.querySelectorAll('.c-nav .c-nav__item');
    
var newMenuList = [];
var tempDropdownList = [];

nav_list.forEach( (item, index) =>
{
  if(item.childNodes[1].innerText.startsWith('-'))
  {
    tempDropdownList.push(item);
  }else{
    newMenuList.push(item);
  }
  
  if(tempDropdownList.length > 0)
  {
    let _dropdown = document.createElement("ul");

    tempDropdownList.forEach(item =>
    {
      item.childNodes[1].innerText = item.childNodes[1].innerText.replace("-","");
      _dropdown.appendChild(item);
    });

    newMenuList[newMenuList.length - 1].appendChild(_dropdown);
  }
  tempDropdownList = [];
    
});

<ul >
  <li >
    <a href="http://localhost:2369/latest/" >Latest</a>
  </li>
  <li >
    <a href="http://localhost:2369/authors/" >Authors</a>
  </li>
  <li >
    <a href="http://localhost:2369/tag/politics/" >- Politics</a>
  </li>
  <li >
    <a href="http://localhost:2369/tag/covid/" >Covid</a>
  </li>
  <li >
    <a href="http://localhost:2369/tag/history/" >- History</a>
  </li>
  <li >
    <a href="http://localhost:2369/tag/technology/" >- Technology</a>
  </li>
</ul>

CodePudding user response：

Assuming you require to filter list when anchor tag i.e <a> has a value that starts with -, you may use following code snip to obtain that.

This code does not return you markup but JS array that you may use to create a markup if you want.

         <script>
            function filterDashList(list){
                if(Array.isArray(list)){
                    list = list.filter(el => 
                              el.innerText.trim().startsWith("-"))
                    return list
                }else{
                    return ""
                }
            }

            // find list
            let list = document.querySelectorAll(".c-nav .c-nav__link")
            list = list.length > 0 ? Array.from(list): []
            list = filterDashList(list) ;
            if(list == ""){
                console.error("something went wrong")
            }else{
                console.log(list)
            }

        
        </script>