如何使用jQuery在元素的内部文本的最后一个单词周围包裹一个范围？

Question

我知道这应该是一个简单的任务,但我在选择一个标题元素的最后一个单词并将其包装在一个跨度中时遇到问题,所以我可以添加样式更改.

这是我到目前为止所拥有的

$('.side-c h3').split(/\s+/).pop().wrap('<span />');

任何帮助将不胜感激

Answer 1

问题是jQuery对象包装DOM节点.元素中的每个单词本身都不是DOM节点,因此您需要更多的工作来分解文本并重新加入它.您还需要考虑jQuery选择的多个节点.试试这个:

$('.side-c h3').each(function(index, element) {
    var heading = $(element), word_array, last_word, first_part;

    word_array = heading.html().split(/\s+/); // split on spaces
    last_word = word_array.pop();             // pop the last word
    first_part = word_array.join(' ');        // rejoin the first words together

    heading.html([first_part, ' <span>', last_word, '</span>'].join(''));
});