Convert LI elements to DIV

Question

I have a list of items inside a nested div with parent, grand parent and great grand parent divs. 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?

@Leeish: The word `lies` will become `dives`, if it's contained in the HTML. — Blender, Jan 17 '13 at 20:35

wirey00 · Answer 1 · 2013-01-17T21:15:50.507

4

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

edited Jan 17 '13 at 21:15

answered Jan 17 '13 at 20:38

wirey00

33,517
7
54
65

If that works that looks good. The ul element will go away so it won't have div children anymore. – Leeish Jan 17 '13 at 20:39
But I am worried about using this is that what if we have other listed items in the content divs of li's we are converting to divs, won't this code affect them? – Patrick Ejelle-Ndille Jan 17 '13 at 21:11
@PatrickEjelle-Ndille what do you mean? You can always be as specific as you want with the selector to limit which elements.. – wirey00 Jan 17 '13 at 21:14
is there not a way specify it so that it target just those li elements on that level of the hierarchy? – Patrick Ejelle-Ndille Jan 17 '13 at 21:16
@PatrickEjelle-Ndille I updated my answer to show you how select the direct children only.. If you give an example I can give you an exact selector.. but using `>` will only get the direct descendant.. which is probably what you want – wirey00 Jan 17 '13 at 21:17
$('.k2ItemsBlock > ul > li > div') did not make any diffrence – Patrick Ejelle-Ndille Jan 17 '13 at 21:23
Can you add your html to the fiddle and fork/update it so I can see what you're talking about? – wirey00 Jan 17 '13 at 21:26
@PatrickEjelle-Ndille see this [FIDDLE](http://jsfiddle.net/fumgT/).. IT will only affect the elements at that level of hierarchy – wirey00 Jan 17 '13 at 21:47

jholloman · Answer 2 · 2013-01-17T20:56:37.093

0

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.

edited Jan 17 '13 at 20:56

answered Jan 17 '13 at 20:34

jholloman

1,959
14
16

score 0 · Answer 3 · answered Jan 17 '13 at 20:36

0

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.

answered Jan 17 '13 at 20:36

Leeish

5,203
2
17
45

I've added your suggestion to step 2 to make the code look like below; // Replace div.marketing with its listed items // 1. Get all content inside .K2ItemsBlock ul var mlist = $(".k2ItemsBlock ul").contents(); // 2. Change li elements inside .K2ItemsBlock ul to Divs mlist = mlist.replace('/
/g','
').replace('/<\/li>/g','
') // 3. Repalce div.marketing with listed items $(".marketing").replaceWith(mlist); But that brings gets it back to how it was previously without step 2.

Patrick Ejelle-Ndille

Jan 17 '13 at 20:53

score 0 · Answer 4 · answered Jan 17 '13 at 20:58

// 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('');

Convert LI elements to DIV

4 Answers4