jQuery .map() test

by Yohan Yang

HTML

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>
<p id="console1" class="console"></p>
<p id="console2" class="console"></p>

CSS

.console {border-right: 1px solid #ccc; padding: 5px; background-color: #eee;}

JavaScript

var texts = $('li').map(function(i,el) {
    return i + ' : ' + el.innerHTML;
});
for(var i = 0; i < texts.length; i++) {
    $('#console1').append($('<div/>').text(texts[i]));    
}
var str = texts.get().reverse().join(' / ');
$('#console2').text(str);