javascript - 始终将展开按钮放在段落末尾

Question

这是在线示例: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();
});​

任何可能的方法可以使“显示”切换按钮始终显示在段落末尾？格式看起来像

，而不是显示在第二行

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…Show

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

Answer 1

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

确保选择跨度的 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();
});​