Question

我试图截断段落中的文字。段落里面有span标签，所以我写的脚本是计算段落内的文本（包括span标签内容）。

最终结果（呈现文本）正在消除span标记（我需要为span标记文本应用不同的样式，因此必须保留span标记）。

那么我如何只计算段落的直接内容，而不计算其中的span文本。

以下是用于截断的脚本

    var showChar = 50;
    var moretext = "more...";
    var lesstext = "less";
    $('p').each(function() {
        var content = $(this).text();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(1, content.length - showChar);

            var html = c + '<span class="more"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }    
    });  
    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");  
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });

DEMO

Answer 1

您只能使用以下选择p标签内的文本节点：

var contents=$(this).contents().filter(function() {
    return this.nodeType == 3;
}).text();

第二种方法很慢，因为它涉及克隆元素，找到孩子然后删除它们。但是你可以这样做。

var contents= $(this).clone()
        .children()
        .remove()
        .end()
        .text();

文本截断直接元素内容

1 个答案: