Loading...

Search jQuery

Search

jQuery Forum

Change UL LI into DIV SPAN

in Using jQuery • 11 years ago

Is it possible, with jQuery to change an unordered list

<ul>

<li></li>

<li></li>

etc.

</ul>

into a div and span

<div>

<span></span>

<span></span>

etc.

</div>) ?

1

Replies(9)

jay.blanchard

Re: Change UL LI into DIV SPAN

11 years ago

You can using .add() and .remove() - but the question is why would you want to? .remove() is quite dangerous because it removes the selected set, all of its content...read this for more info; http://api.jquery.com/remove

If you want to do this you would have to perform the add prior to the remove so that you can preserve the data contained in the tags.

Re: Change UL LI into DIV SPAN

11 years ago

here's a solution using replaceWith() - you could also use unWrap() and wrap()

var html = [], $list = $('#myList');

html.push('<div>');
$list.find('li').each(function() {
html.push('<span>' + $(this).text() + '</span>');
});
html.push('</div>');
$list.replaceWith(html.join(''));

demo: http://jsfiddle.net/3zEbn/

Re: Re: Change UL LI into DIV SPAN

11 years ago

This is quite good. It works as long as the list elements contain just text.

My unordered list is a menu. So each list element contains a link.

How could the code be modified to work with this UL:

<ul class="menu">

<li><a href="#">Link to somewhere</a></li>

<li><a href="#">Another link</a></li>

etc.

</ul>

Re: Change UL LI into DIV SPAN

11 years ago

Any suggestions on how the comment, above, could be implemented?

Re: Change UL LI into DIV SPAN

11 years ago

simple change:

$(this).text()

to

$(this).html()

Re: Re: Change UL LI into DIV SPAN

11 years ago

OK. So that was easy.

Next bit might be too difficult though...

How can this be made to work with multi-level menus? i.e.

<ul class="menu">

<li><a href="#">Link to somewhere</a></li>

<li><a href="#">Sub level</a>

<ul class="sub-level">

<li><a href="#">Sub-level</a></li>

<li><a href="#">Another sub-level link</a></li>

</ul>

</li>

<li><a href="#">Sub-level</a>

<ul class="sub-level">

<li><a href="#">Sub level 2</a>

<ul class="sub-level">

<li><a href="#">Sub level 2</a></li>

<li><a href="#">Another on sub level 2</a></li>

</ul>

</li>

<li><a ref="#">First sub-level</a></li>

</ul;>

</li>

<li><a href="#">Another link</a></li>

etc.

</ul>

Re: Change UL LI into DIV SPAN

11 years ago

within a $.each another $.each can be run on children. Not sure how output should look. Put a before and after mockup into jsfiddle.net

Kevin B

Re: Change UL LI into DIV SPAN

11 years ago

so... you just want to replace all ul's with divs and li's with spans. seems pretty straight forward...

does this jsfiddle cover it?

http://jsfiddle.net/Tentonaxe/FXjvF/

i used the test html structure you posted

-- Kevin

Re: Change UL LI into DIV SPAN

11 years ago

I should have started with wrap/unwrap...it occurred to me as an afterthought, nice and clean!