如何使用jQuery在元素的内部文本的最后一个单词周围包裹一个范围?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用jQuery在元素的内部文本的最后一个单词周围包裹一个范围?相关的知识,希望对你有一定的参考价值。
我知道这应该是一个简单的任务,但我在选择一个标题元素的最后一个单词并将其包装在一个跨度中时遇到问题,所以我可以添加样式更改。
这是我到目前为止所拥有的
$('.side-c h3').split(/\s+/).pop().wrap('<span />');
任何帮助将不胜感激
答案
问题是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(''));
});
另一答案
这样做:
$('.side-c h3').each(function(){
var $this = $(this), text=$this.text().trim(), words = text.split(/\s+/);
var lastWord = words.pop();
words.push('<span>' + lastWord + '</span>');
$this.html(words.join(' '));
});
另一答案
嗯,这不是特别容易。最正统的方法是使用DOMNode.splitText
:
$('.side-c h3').each(function(){
var oldNode = this.firstChild,
newNode = oldNode.splitText(oldNode.data.lastIndexOf(' ') + 1), // don't wrap the space
span = document.createElement('span');
this.replaceChild(span, newNode);
span.appendChild(newNode);
});
以上是关于如何使用jQuery在元素的内部文本的最后一个单词周围包裹一个范围?的主要内容,如果未能解决你的问题,请参考以下文章