Setting text gets rid of children - Jquery

<li class="active">Votes - Most
    <ul id="sortType" title="<%=votesHigh %>">
        <li style="cursor:po开发者_运维技巧inter;" value="<%=votesHigh %>">Votes - Most</li>
        <li style="cursor:pointer;" value="<%=votesLow %>">Votes - Least</li>
    </ul>
</li>

Now, I want to set the text of the parent <li>, when I select one of the others. This works, but also deletes all the children.

Here's my code:

$('li > ul > li').click(function(){
        var val = $(this).attr('value');
        $(this).parent().attr('title', val);
        $(this).parent().parent().text($(this).text());
    });

Encapsulate the "Votes - Most" in a span:

<li class="active"><span>Votes - Most</span>
    <ul id="sortType" title="<%=votesHigh %>">
        <li style="cursor:pointer;" value="<%=votesHigh %>">Votes - Most</li>
        <li style="cursor:pointer;" value="<%=votesLow %>">Votes - Least</li>
    </ul>
</li>

...and target the span. Something like:

$(this).parent().closest("li").find("span:first").text($(this).text());