將HTML串列轉換為帶有下拉選單的串列

我有一個 HTML 串列，如果某些專案以-.

如果以開頭的串列項位于串列-的中間，則它可以正常作業，但如果這些專案是最新的，則不會。

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 class="c-nav">
  <li class="c-nav__item">
    <a href="http://localhost:2369/latest/" class="c-nav__link ">Latest</a>
  </li>
  <li class="c-nav__item">
    <a href="http://localhost:2369/authors/" class="c-nav__link ">Authors</a>
  </li>
  <li class="c-nav__item">
    <a href="http://localhost:2369/tag/politics/" class="c-nav__link ">- Politics</a>
  </li>
  <li class="c-nav__item">
    <a href="http://localhost:2369/tag/covid/" class="c-nav__link ">Covid</a>
  </li>
  <li class="c-nav__item">
    <a href="http://localhost:2369/tag/history/" class="c-nav__link ">- History</a>
  </li>
  <li class="c-nav__item">
    <a href="http://localhost:2369/tag/technology/" class="c-nav__link ">- Technology</a>
  </li>
</ul>

有什么我可以解決的嗎？

uj5u.com熱心網友回復：

這是另一種直接的方法：

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 class="c-nav">
  <li class="c-nav__item">
    <a href="http://localhost:2369/latest/" class="c-nav__link ">Latest</a>
  </li>
  <li class="c-nav__item">
    <a href="http://localhost:2369/authors/" class="c-nav__link ">Authors</a>
  </li>
  <li class="c-nav__item">
    <a href="http://localhost:2369/tag/politics/" class="c-nav__link ">- Politics</a>
  </li>
  <li class="c-nav__item">
    <a href="http://localhost:2369/tag/covid/" class="c-nav__link ">Covid</a>
  </li>
  <li class="c-nav__item">
    <a href="http://localhost:2369/tag/history/" class="c-nav__link ">- History</a>
  </li>
  <li class="c-nav__item">
    <a href="http://localhost:2369/tag/technology/" class="c-nav__link ">- Technology</a>
  </li>
</ul>

uj5u.com熱心網友回復：

假設您需要在錨標記 ie<a>具有以 - 開頭的值時過濾串列，您可以使用以下代碼片段來獲取它。

此代碼不會回傳您的標記，而是 JS 陣列，您可以根據需要使用它來創建標記。

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

標籤：javascript html

上一篇：我如何知道在php中選擇了哪個單選按鈕？

下一篇：請記住是否單擊了按鈕 停止間隔不起作用