html5 - How to close open html tags in an php foreach loop -


i have code produces horizontal menu in wordpress. however, produces invalid code because html tags aren't closed. have tried adding closing tags in loop seems mess menu bad.

foreach ( (array) $menu_items $key => $menu_item ) {     $tiny_menu_list .= '<option value="'. $menu_item->url .'">'. $menu_item->title .'</option>';     if( !$menu_item->menu_item_parent ){         $menu_list .= '<li><div><a href="' . $menu_item->url . '">' . $menu_item->title . '</a>';             if( count($menu_items) > 1 )                 $menu_list .= '<span>';             continue;     }     $menu_list .= '|<a href="' . $menu_item->url . '">' . $menu_item->title . '</a>'; } if( count($menu_items) > 1 )     $menu_list .= '</span>'; $menu_list .= '</div></li></ul>'; 

here code generates:

<li><div><a href="/">home page</a> <span><li><div><a href="/about-us/">about us</a> <span>|<a href="/why-us/">why ?</a>|<a href="/why-us/compare/">compare us</a> <li><div><a href="/tour/">take tour</a> <span>|<a href="/frequently-asked-questions/">frequently asked questions</a> <li><div><a href="/free-options-videos/">free options videos</a> <span><li><div><a href="/options-courses/">options courses</a> <span>|<a href="./">extended options course</a>|<a href="/ultimate-options-course/">ultimate options course</a></span></span></div></li></ul> 

as can tell, each li & span & div not closed. thankfully browsers correct this, sake of being html5 compliant, use in fixing it.

this not due html tags, happening because missing many closing </div> , </li> .

on formatting code dumped loop shows this:

<li>    <div>    <a href="/">home page</a></li>    <span> <li>    <div>    <a href="/about-us/">about us</a>    <span>|<a href="/why-us/">why ?</a>|<a href="/why-us/compare/">compare us</a> <li>    <div>    <a href="/tour/">take tour</a>    <span>|<a href="/frequently-asked-questions/">frequently asked questions</a> <li>    <div>    <a href="/free-options-videos/">free options videos</a>    <span> <li><div><a href="/options-courses/">options courses</a> <span>|<a href="./">extended options course</a>|<a href="/ultimate-options-course/">ultimate options course</a></span></span></div></li></ul> 

you can check error pasting code in html validator one

and show missing elements.


Comments

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

ios - Change Storyboard View using Seague -