使用jquery设置段落的第一个字符

Question

我正在寻找一种方式来设置段落中的第一个字符.我用这个函数返回第一个字符

var x= $(".about p:eq(0)").text();
alert(x.charAt(0));

但不知道如何设计它

Answer 1

您可以使用CSS3设置第一个字符的样式.

p::first-letter { 
  font-size: 200%;
  color: #8A2BE2;
}

演示:http: //jsfiddle.net/vhyqowde/

更多信息:http: //www.w3schools.com/cssref/sel_firstletter.asp

Javascript方法:

$(document).ready(function () { 
    var elem = $("p").contents().filter(function () { return this.nodeType == 3 }).first(),
        text = elem.text().trim(),
        first = text.slice(0, 1);

    if (!elem.length)
        return;

    elem[0].nodeValue = text.slice(first.length);
    elem.before('<span>' + first + '</span>');
});

http://jsfiddle.net/kynt4pot/

Answer 2

使用CSS first-letter选择器

p::first-letter {
    color: #FF69B4;
}

这将选择并设置每个<p>元素的第一个字母. JS小提琴演示