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 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>Is there anything I can fix this?
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>
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 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>