javascript - 使用 jQuery 在 x 个单词后插入一个 <br/> 标签

Question

我正在尝试插入 <br />在标题中的 5 个单词之后，但我正在使用的代码段不起作用。请看下面:

$("#post-id > h2").each(function() {
    var html = $(this).html().split(" ");
    html = html[0] + "<br />" + html.slice(1).join(" ");
    $(this).html(html);
});

这个功能很好用——如果你想添加一个 <br />在第一个 词之后标记。但是如果我把它改成 html.slice(5)那么它就不能正常工作。

我怎样才能解决这个问题，让它在 5 个单词后正常工作？或者，也许不同的方法会更合适？提前感谢您的帮助!

Answer 1

$("#post-id > h2").each(function() {
     var html = $(this).html().split(" ");
     html = html.slice(0,5).join(" ") + "<br />" + html.slice(5).join(" ");
     $(this).html(html);
});​

http://jsfiddle.net/f4chL/

基本思想是通过从索引零开始切片获取前 5 个单词，并获取数组的 5 个元素，加入它们，添加 break 标记，然后在索引 5 处获取数组中的其余元素(因为它是零基于索引)并用空格连接它们并将其转储到最后

编辑

为了完整的答案，如果 OP 确实想在每 5 个单词后拆分，这里有另一种方法

$("h2").each(function() {
var html = $(this).html().split(" ");
var newhtml = [];

for(var i=0; i< html.length; i++) {

    if(i>0 && (i%5) == 0)
        newhtml.push("<br />");

    newhtml.push(html[i]);
}

$(this).html(newhtml.join(" "));
});​

http://jsfiddle.net/2Z2nM/