如何使用jquery在标题的前半部分包装一个类？

Question

我试图围绕标题的第一部分或后半部分包装一个类,以便我可以使用jQuery创建更多动态和酷炫的标题.

从理论上讲,我想找到句子中的所有空格并将其分成两部分.如果标题包含不均匀的单词数,则脚本应检测到该单词,并将该类添加到最近的单词.

请参阅此图片以获得更清晰的解释:http://images.homey.se/dynamic_headline.png

Answer 1

不错的一个@lashleigh。您可以在这里查看一个工作示例：

http://jsfiddle.net/johnhunter/KRJdm/

@Tony，我已经将你所追求的作为 jquery 插件实现了。您可以在要格式化的标题上调用它：

$(function() {
    $('h1').splitWords();
});

...它将产生这样的 html 输出：

前：

<h1>This is a long headline</h1>

后：

<h1>
    <span class="wrap-1">This is </span>
    <span class="wrap-2">a long headline </span>
</h1>

更新：

不是原始问题的一部分，但我更新了示例以允许您指定换行发生在哪个单词。如果您提供索引参数，它将使用单词列表上的偏移量（负值从末尾倒数）。例如：

$('h1.a').splitWords();   // Split these words equally
$('h1.b').splitWords(1);  // Split these after the first word
$('h1.c').splitWords(-2); // Split these after the second last word

http://jsfiddle.net/johnhunter/KRJdm/