Jquery 向添加类并限制html的数量

我有一个div id=“X”，其中有多个p，我想要的是jquery选择第一个p，然后从该p中选择前25个单词，并给它们类摘录

$("p:first").addClass("excerpt");

---

这不是问题，但如何限制字数

您必须进入

p

元素内的文本节点，拆分文本数据，然后在这些单词周围放置一个新的包装器元素，并为该包装器提供一个类。不能将类直接添加到文本本身

jQuery并没有为您提供太多用于操作文本节点的工具，因此您也必须使用一些普通DOM来实现这一点，例如：

var p= $('p')[0];
if (p.firstChild!==null && p.firstChild.nodeType===3) { // TEXT_NODE
    // work out how many characters into the text 25 words is
    var ix= p.firstChild.data.match(/^\s*(\S+\s*){0,25}/)[0].length;
    // split into two text nodes
    p.firstChild.splitText(ix);
    // put the first of them into a span
    $(p.firstChild).wrap('<span class="excerpt">');
}

var p=$（'p'）[0]；
如果（p.firstChild！==null&&p.firstChild.nodeType==3）{//TEXT\u节点
//计算出25个单词的文本中有多少个字符
var ix=p.firstChild.data.match（/^\s*（\s+\s*）{0,25}/）[0]。长度；
//拆分为两个文本节点
p、 第一个孩子。拆分文本（ix）；
//将第一个放在一个跨度中
$（p.firstChild）.wrap（“”）；
}

这要求元素中的文本是单个直接文本节点。如果文本中有更多元素，例如：

<p>
    a b c d e f g h i j k l m n o
    <em>p q r s t u v w x y (25th word here) z</em>
</p>

a b c d e f g h i j k l m n o
p q r s t u v w x y（这里是第25个单词）z

---

然后问题就变得更加棘手了，因为您不能仅将

包装在元素的一部分上。

您必须进入

p

元素内的文本节点，拆分文本数据，然后在这些单词周围放置一个新的包装器元素，并给该包装器一个类。不能将类直接添加到文本本身

var p = $('#X p:first'),
t = p.text().split(/" "+/g),
n = 25,
txt = "",
span = function(word){
    return "<span class='excerpt'>"+word+"</span>";
};
for(var i in t)
    txt += i > n ? t[i]+" " : span(t[i]+" ");
p.text(txt);

jQuery并没有为您提供太多用于操作文本节点的工具，因此您也必须使用一些普通DOM来实现这一点，例如：

var p= $('p')[0];
if (p.firstChild!==null && p.firstChild.nodeType===3) { // TEXT_NODE
    // work out how many characters into the text 25 words is
    var ix= p.firstChild.data.match(/^\s*(\S+\s*){0,25}/)[0].length;
    // split into two text nodes
    p.firstChild.splitText(ix);
    // put the first of them into a span
    $(p.firstChild).wrap('<span class="excerpt">');
}

var p=$（'p'）[0]；
如果（p.firstChild！==null&&p.firstChild.nodeType==3）{//TEXT\u节点
//计算出25个单词的文本中有多少个字符
var ix=p.firstChild.data.match（/^\s*（\s+\s*）{0,25}/）[0]。长度；
//拆分为两个文本节点
p、 第一个孩子。拆分文本（ix）；
//将第一个放在一个跨度中
$（p.firstChild）.wrap（“”）；
}

这要求元素中的文本是单个直接文本节点。如果文本中有更多元素，例如：

<p>
    a b c d e f g h i j k l m n o
    <em>p q r s t u v w x y (25th word here) z</em>
</p>

a b c d e f g h i j k l m n o
p q r s t u v w x y（这里是第25个单词）z

然后问题就变得更加棘手了，因为您不能将

仅围绕元素的一部分

var p = $('#X p:first'),
t = p.text().split(/" "+/g),
n = 25,
txt = "",
span = function(word){
    return "<span class='excerpt'>"+word+"</span>";
};
for(var i in t)
    txt += i > n ? t[i]+" " : span(t[i]+" ");
p.text(txt);

将

n

设置为3，更改后，您将有：

<p>
    <span class='excerpt'>Lorem</span>
    <span class='excerpt'>ipsum</span>
    <span class='excerpt'>dolor</span>
    sit amet, consectetur adipisicing elit
</p>

洛勒姆
乱数假文
多洛
坐在阿梅特，奉献给精英们

将

n

设置为3，更改后，您将有：

<p>
    <span class='excerpt'>Lorem</span>
    <span class='excerpt'>ipsum</span>
    <span class='excerpt'>dolor</span>
    sit amet, consectetur adipisicing elit
</p>

洛勒姆
乱数假文
多洛
坐在阿梅特，奉献给精英们

 > 你也可以考虑Ben Nadel在这里所描述的工作：


然后，根据他的工作，你可以这样做：

$(function() {
    tag = $('p');
    wordcount = 5;
    partclass = 'strong';

    var rawContent = $.trim( tag.text() );
    rawContent = rawContent.replace(new RegExp( "\\s+", "g" )," ");
    var snippets = rawContent.match(new RegExp( "([^\\s]+\\s?){1," + wordcount + "}", "g"));

    if (!snippets.length){
        snippets = [ "Nothing" ];
    }

    var wc = (
    (wordcount * (snippets.length - 1)) +
    snippets[ snippets.length - 1 ].split( " " ).length
    );

    tag.html(
    "<span class=\""+partclass+"\">" +
    snippets[ 0 ] + "</span>"
    );
    for (a = 1; a < snippets.length; a++)
        tag.append(snippets[a]);
});

$（函数（）{
标记=$（'p'）；
字数=5；
partclass='strong'；
var rawContent=$.trim（tag.text（））；
rawContent=rawContent.replace（新的RegExp（“\\s+”，“g”），”）；
var snippets=rawContent.match（新的RegExp（（[^\\s]+\\s？{1，“+wordcount+”}，“，”g”）；
如果（！snippets.length）{
代码片段=[“无”]；
}
var wc=(
（字数*（snippets.length-1））+
代码段[snippets.length-1]。拆分（“”）。长度
);
tag.html(
"" +
代码段[0]+“”
);
对于（a=1；a

你也可以考虑Ben Nadel在这里所描述的工作：


然后，根据他的工作，你可以这样做：

$(function() {
    tag = $('p');
    wordcount = 5;
    partclass = 'strong';

    var rawContent = $.trim( tag.text() );
    rawContent = rawContent.replace(new RegExp( "\\s+", "g" )," ");
    var snippets = rawContent.match(new RegExp( "([^\\s]+\\s?){1," + wordcount + "}", "g"));

    if (!snippets.length){
        snippets = [ "Nothing" ];
    }

    var wc = (
    (wordcount * (snippets.length - 1)) +
    snippets[ snippets.length - 1 ].split( " " ).length
    );

    tag.html(
    "<span class=\""+partclass+"\">" +
    snippets[ 0 ] + "</span>"
    );
    for (a = 1; a < snippets.length; a++)
        tag.append(snippets[a]);
});

$（函数（）{
标记=$（'p'）；
字数=5；
partclass='strong'；
var rawContent=$.trim（tag.text（））；
rawContent=rawContent.replace（新的RegExp（“\\s+”，“g”），”）；
var snippets=rawContent.match（新的RegExp（（[^\\s]+\\s？{1，“+wordcount+”}，“，”g”）；
如果（！snippets.length）{
代码片段=[“无”]；
}
var wc=(
（字数*（snippets.length-1））+
代码段[snippets.length-1]。拆分（“”）。长度
);
tag.html(
"" +
代码段[0]+“”
);
对于（a=1；a

示例
使用substr（start，finish）来修剪文本thnx以进行响应，但是你可以说得更具体一点，我是jquery的noob，请给我一个示例，thnx
substr
是一个JavaScript函数，而不是jquery……你真的希望每个单词都有类摘录，还是仅仅是父“p”标记？使用substr（start，finish）要修剪您的文本thnx以进行响应，但您能否更具体一点，我是jquery的noob，请给我一个例子，thnx
substr
是一个JavaScript函数，而不是jquery……您真的希望每个单词都有类摘录，还是仅仅是父“p”标记？