javascript - 始终在段落末尾单击展开按钮

这是在线示例：http://jsfiddle.net/Nh4K2/

<div class="container">
    Nulla varius diam at sem adipiscing pharetra. Integer eget nulla non purus commodo aliquam. Aenean sed nunc neque. Aliquam eleifend aliquam arcu, ac semper nulla faucibus id. Etiam luctus eleifend tempus. Vestibulum ornare, nisi vitae fermentum luctus, sem lectus rhoncus nibh, auctor iaculis magna turpis nec turpis. Aliquam orci tortor, vulputate at pretium sit amet, blandit eget libero. Sed posuere ultricies mi, sed rhoncus massa ultrices quis. Donec pulvinar vestibulum rhoncus. Donec urna lacus, mollis et convallis at, commodo nec lectus. Maecenas pretium, nunc ac volutpat tempus, dolor orci ultricies massa, eu malesuada urna massa ut orci. Duis eget elit nulla, ornare aliquet nulla. Sed eleifend scelerisque est, eu laoreet lacus ultricies id. Aenean aliquam porttitor augue, quis lacinia augue consequat vitae. Ut venenatis orci massa. Duis dignissim, justo at pellentesque adipiscing, ligula eros mollis tellus, ut accumsan lorem dui eu est.
        <div class="whatever">hahahahahaha</div>
    <div class="damn">hohohohohohoho</div>
    <div class="laugh">lololololololololo</div>
</div>
<span>Show</span>​

function excerpt(str, nwords) {
    var words = str.split(' ');
    words.splice(nwords, words.length - 1);
    return words.join(' ') + '&hellip;';
}

var $div = $('.container');
$div.each(function() {
    var theExcerpt = excerpt($(this).text(), 30);
    $(this).data('html', $(this).html()).html( theExcerpt );
});

$('span').click(function() {
    var isHidden = $(this).text() == 'Show';
    var $div = $(this).prev();
    var theExcerpt = excerpt($div.text(), 30);
    $div.html( isHidden ? $div.data('html') : theExcerpt);
    $(this).remove();
});​

有没有可能使“显示”切换按钮始终显示在段落的末尾？而不是显示在第二行，格式看起来像


  Sem贴合相的Nulla varius直径。整数eget nulla non
  Purus commodo aliquam。 Aenean sed nunc neque。 Aliquam eleifend aliquam
  阿库，阿桑普森农庄博物馆…显示


非常感谢您的任何建议或解决方案。

最佳答案

将跨度添加到函数的摘录中。

确保选择跨度的parent()而不是其prev()。

http://jsfiddle.net/Nh4K2/3/

<div class="container">
    Nulla varius diam at sem adipiscing pharetra. Integer eget nulla non purus commodo aliquam. Aenean sed nunc neque. Aliquam eleifend aliquam arcu, ac semper nulla faucibus id. Etiam luctus eleifend tempus. Vestibulum ornare, nisi vitae fermentum luctus, sem lectus rhoncus nibh, auctor iaculis magna turpis nec turpis. Aliquam orci tortor, vulputate at pretium sit amet, blandit eget libero. Sed posuere ultricies mi, sed rhoncus massa ultrices quis. Donec pulvinar vestibulum rhoncus. Donec urna lacus, mollis et convallis at, commodo nec lectus. Maecenas pretium, nunc ac volutpat tempus, dolor orci ultricies massa, eu malesuada urna massa ut orci. Duis eget elit nulla, ornare aliquet nulla. Sed eleifend scelerisque est, eu laoreet lacus ultricies id. Aenean aliquam porttitor augue, quis lacinia augue consequat vitae. Ut venenatis orci massa. Duis dignissim, justo at pellentesque adipiscing, ligula eros mollis tellus, ut accumsan lorem dui eu est.
        <div class="whatever">hahahahahaha</div>
    <div class="damn">hohohohohohoho</div>
    <div class="laugh">lololololololololo</div>
</div>
​

function excerpt(str, nwords) {
    var words = str.split(' ');
    words.splice(nwords, words.length - 1);
    return words.join(' ') + '&hellip;' + '<span>Show</span>';
}

var $div = $('.container');
$div.each(function() {
    var theExcerpt = excerpt($(this).text(), 30);
    $(this).data('html', $(this).html()).html( theExcerpt);
});

$('span').click(function() {
    var isHidden = $(this).text() == 'Show';
    var $div = $(this).parent();
    var theExcerpt = excerpt($div.text(), 30);
    $div.html( isHidden ? $div.data('html') : theExcerpt);
    $(this).remove();
});​