jquery, array , html , append

Question

Hi,

I want to take "div" s and and this html in "li" .

This is my HTML code:

<ul class="NewContent">

    </ul>   
        <div class="test">
            <span>Text1</span>
        </div>

        <div class="test">
            <span>Text2</span>
        </div>

and jquery (not sure if it is ok started):

<script type="text/javascript">
        $(document).ready(function(){
            $('ul.NewContent').append("<li>"+ $('.test').html()+"</li>");
        });
    </script>

But the problem is, that I want to add each "div" content in new "li"

something like this:

output:

<ul class="NewContent">
            <li><span>Text1</span></li>
            <li><span>Text2</span></li>
        </ul> 

now is not good .. I need to add on array or something like this

Thanks !!

Sorry for My confusing description !

Answer 1

This should do it:

$(function() {
    $('.test').each(function() {
        $('ul.NewContent').append('<li>'+$(this).html()+'</li>');
        $(this).remove();
    });
});

Answer 2

Try this:

$(function() {
  $('ul.NewContent').html($.map($('div.test'), function(i, div) {
    return '<li>' + $(div).html() + '</li>';
  }).get().join(''));
});