1

I have a ul class for a menu that joomla creates in my site but i dont want the li items inside, i want to transform them to div

<ul class="uk-nav uk-nav-default uk-nav-parent-icon uk-nav-accordion" uk-nav="">

<li><a href="/aviso-legal">Aviso legal</a></li>
<li><a href="/politica-de-privacidad">Política de privacidad</a></li>
<li><a href="/politica-de-cookies">Política de cookies</a></li></ul>

I try this:

content.find(".uk-nav li>div").unwrap().wrap("<div>");

What i want at the end is:

<ul class="uk-nav uk-nav-default uk-nav-parent-icon uk-nav-accordion" uk-nav="">

<div><a href="/aviso-legal">Aviso legal</a></div>
<div><a href="/politica-de-privacidad">Política de privacidad</a></div>
<div><a href="/politica-de-cookies">Política de cookies</a></div></ul>

http://jsfiddle.net/vyfx1L8w/ Change also ul to div is ok, or ul to div and li to p

David
  • 15
  • 5
  • 1
    **Heads up**: `
    ` as a direct child of a `
      ` is [invalid html](https://stackoverflow.com/questions/11755628/can-i-use-div-as-a-direct-child-of-ul). Is there a particular reason for wanting to do this?
     – Lewis Jul 10 '19 at 12:29
  • Change also ul to div is ok, or ul to div and li to p, i dont want the style of li in that item and joomla is doing it with no option of change. – David Jul 10 '19 at 12:30
  • Why not just style the list the way you want it with CSS? – Turnip Jul 10 '19 at 12:41

1 Answers1

0

As mentioned in my comment, ensure you replace the UL also to ensure you still have valid HTML when you're done. Anyway, Since you're already using jQuery, you could do this;

let content = $(".uk-nav").html();
content = content.replace(/<li>/g, "<div>");  
content = content.replace(/<\/li>/g,"<div>"); 
$(".uk-nav").html(content);

If you'd rather do this with vanilla javascript, this is also an option;

let content = document.querySelector('.uk-nav').innerHTML;
content = content.replace(/<li>/g, "<div>");  
content = content.replace(/<\/li>/g,"<div>"); 
document.querySelector('.uk-nav').innerHTML = content;

To change the UL in to a div, do the same thing but target the UL's parent.

Lewis
  • 3,479
  • 25
  • 40
  • @David Sorry, I missed out a pretty important part. I've updated my answer to include the missing line. [Fork of your fiddle](http://jsfiddle.net/s7j1gc8m/). – Lewis Jul 10 '19 at 12:53