Convert multiple Textareas to LI in unordered list

Question

I have an unknown number of textareas. To process the data entered by the user I need to convert their contents to list elements.

Using JavaScript and/or jQuery, how can I convert this:

<textarea>content 1</textarea>
<textarea>content 2</textarea>
<textarea>content 3</textarea>

To this:

<ul>
    <li>content 1</li>
    <li>content 2</li>
    <li>content 3</li>
</ul>

I need to asign the resulting UL to a variable that is sent to an AJAX service.

Edit - so far i tried:

var visibleTextareas = $('textarea:visible');

var listItems = visibleTextareas.replaceWith(function() {
    return $('<li>' + $(this).val() + '</li>');
});

var text = '<ul>' + listItems + '</ul>';
console.log(text);

This results in <ul>[object Object]</ul> being logged to the console and the backend responds that it needs an UL.

Answer 1

Try something like this:

var output = '<ul>';

$('textarea').each(function(){
    output += '<li>' + $(this).val() + '</li>';
});

output += '</ul>';

Does that work for you?

EDIT: .val() is more appropriate in this case.

Answer 2

查看.each()上的jQuery API ，第二个例子可以帮助你..