Legend in jQuery always returns "undefined"

I have a small slide show, but at the time of the caption it does not return anything (it has the alt attribute in the images I want to use)

Below I have the script I'm using:

$(document).ready(function () {
    $('.abre-fecha').hide();
    $('.foto').each(function (i) {
        $(this).replaceWith('<div id="fundoNum"><div id="numeroSlide"><span title="' + $(this).attr('alt') + '">' + (i + 1) + '</span></div></div>');
        $('#galeria').css('textAlign', 'center');
    });
    $('<div id="tela" ><img src="1.jpg" alt="Descrição da imagem" /></div>')
        .insertBefore('#galeria')
    $('#galeria a').click(function (event) {
        event.preventDefault();
        if (!$('#tela img').is(':animated')) {
            $('.legenda').remove();
            var legenda = $(this).children('span').attr('title')
            $('#galeria a').removeClass("corrente");
            $(this).addClass("corrente");
            $('#tela img').attr('src', $(this).text() + '.jpg')
                .css('opacity', '0.3').animate({
                opacity: 1
            }, 1500,

            function () {
                $('#tela').append('<p class="legenda">' + legenda + '</p>');
                $('.legenda').css('opacity', 0.6)
            });
        }
    });
});

and my HTML is like this

<div id="galeria">
     <ul>
        <a href="1.jpg"><li><img src="1.jpg" width="500px" height="300px" class="foto" alt="descrição 1"></li></a>
        <a href="2.jpg"><li><img src="2.jpg" width="500px" height="300px" class="foto" alt="descrição 2"></li></a>
        <a href="3.jpg"><li><img src="3.jpg" width="500px" height="300px" class="foto" alt="descrição 3"></li></a>
     </ul>
 </div>