Convert LI elements to DIV

Question

I have a list of items inside a nested div with parent, grand parent and great grand parent div s. The html code looks like this :

<div class="marketing">
  <div class="module-surround">
    <div class="module-content">
      <div class="k2ItemsBlock">
        <ul>
          <li><div>4</div></li>
          <li><div>5</div></li>
          <li><div>6</div></li>
          <li><div>7</div></li>
        </ul>
      </div>
    </div>
  </div>
</div>

I want to convert all the listed items to parent divs and use all the listed items to replace the great grand parent div, so that the overall code looks like this :

<div><div>4</div></div>
<div><div>5</div></div>
<div><div>6</div></div>
<div><div>7</div></div>

The on my logic, I have want to use jQuery to achieve this, and so far I am able to get all the elements into a listed item inside .K2ItemsBloc ul into a variable and replace div.marketing with the list, my jQuery code to do that looks like this

//1. Get all content in K2ItemsBlock ul into a variable called mlist
    var mlist = $(".k2ItemsBlock ul").contents()
//2. Change all li HTML elements inside the variable mlist to div

//3. Replace div.marketing with the variable mlist
    $(".marketing").replaceWith(mlist);

The above line of jQuery code without task #2 converts my original code to

<li><div>4</div></li>
<li><div>5</div></li>
<li><div>6</div></li>
<li><div>7</div></li>

What I can figure out now is the syntax to convert all the li elements inside the variable mlist before replace div.marketing with it.

Any suggestions or ideas?

Answer 1

Not sure if a div is a valid child of an ul element.. but you can do it like this

$('.k2ItemsBlock li>div').unwrap() // <--- removes the li
                      .wrap('<div/>'); // <-- adds the div

FIDDLE

EDIT: I edited to add li>div just to make it more specific

If you want only the top level li/divs to be affected.. change your selector to this

$('.k2ItemsBlock > ul > li > div') // <--  ">" is direct child selector

Answer 2

A full solution would be:

var marketing = $(".marketing");
var content = marketing.children().remove();
content.find(".k2ItemsBlock li>div").unwrap().wrap("<div>");
marketing.replaceWith(content.find(".k2ItemsBlock li>div");

This should grab all but the top level div. Remove it from the dom, perform manipulation within Javascript for efficiency. And then replace the top level div with the resulting html.

Answer 3

mlist = mlist.replace('/li/g','div');

should do it. Might be better to replace <li> and </li> so you don't accidently replace the actual letters li if there are any.

mlist = mlist.replace('/<li>/g','<div>').replace('/<\/li>/g','</div>');

You get the idea.

Answer 4

// Get an array of li elements
var mlist = $(".k2ItemsBlock ul li");
// new array of div's containing the content of li elements
var dlist = mlist.map(function(i, val){return "<div>" + $(val).html() + "</div>";});
// join div array into a single string
var result = dlist.toArray().join('');