使用jQuery模仿第n个字母

时间:2011-12-02 21:13:22

标签: jquery jquery-selectors css-selectors

CSS(当前)没有任何类型的nth-letter伪选择器。有没有办法用jQuery模仿这个选择器,而不使用一堆span标签?

任何帮助都非常感谢!

2 个答案:

答案 0 :(得分:2)

除非你的信件包含在sort(span,em,div或其中任何一个......)的标签中,否则它不是DOM元素。所以你实际上不能直接用CSS或DOM操作函数来定位它。

答案 1 :(得分:1)

不可能使用jQuery来提取特定的字母,因为jQuery是一种用于提取DOM元素的查询语言。您需要拆分文本节点并创建新的DOM元素(例如使用跨度)以实际定位特定字母。但是,“没有一堆跨度”是不可能的。

这是我尝试类似的事情。我应该说我并不真正考虑这种生产质量,它将完全与它相关的一些错误。我希望它可以让你知道如何使用主要的字符串操作来解决这个问题。

同样,这是一个快速而又肮脏的例子,可以帮助您入门。

function colorizeNthLetter(text, letter) {
    var words = text.split(' ');
    for (var i = 0; i < words.length; i++) {
        if (words[i].length > letter) {
            words[i] = words[i].substring(0, letter-1) + 
                       "<span class='color'>" + 
                       words[i].substring(letter-1, letter) + 
                       "</span>" + 
                       words[i].substring(letter);
        }
    }
    return words.join(" ");
}

http://jsfiddle.net/sQ98n/

一个可能的错误是,在一个空间上分裂以确定单词可能是一种思考单词分离的不完整方式。会有更多。 :)