我正在寻找一种方式来设置段落中第一个字符的样式。我已经使用此功能返回第一个字符
var x= $(".about p:eq(0)").text();
alert(x.charAt(0));
但不知道如何设计它
答案 0 :(得分：7)
您可以使用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>');
});
答案 1 :(得分：6)
答案 2 :(得分：2)
使用Jquery：http://jsfiddle.net/2wkjyz4g/2/
var x= $(".about p:eq(0)").text();
var text='<span class="fChar">'+x.charAt(0)+'</span>';
$(".about p:eq(0)").html(text + x.slice(1,x.length));
使用css：http://jsfiddle.net/pe5Loaqn/
.about p:first-child:first-letter {
color:red;
}
因为您要求提供jquery解决方案并且您选择了第一个（:eq(0)）<p>标记。
var parent = "p"
function styleFirst(elem){
var content = $(elem).contents()[0];
if(content.nodeType == 1){
styleFirst(content);
}else if(content.nodeType == 3){
$(elem).html(style(String(content.nodeValue)));
}
}
function style(txt){
var newTxt = '<span class="fChar">' + txt.charAt(0) + '</span>';
return newTxt + txt.slice(1, txt.length);
}
styleFirst(parent);.fChar {
color:red;
}
span{
color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p><span><span>Win</span>ter</span> is <span>here</span> !!!!!!!!!!!</p>
代码更新：
即使它嵌套在任何其他元素中，也可以保留para标签中的节点也可以设置第一个文本字符的样式。
可以更新代码以检查style()方法中第一个字符是否为空格/制表符等，并且可以应用后续样式。
答案 3 :(得分：1)
在提出相同的初始问题之后，我决定采取其他代码的一些部分，并创建我自己的解决方案/答案。这是我的方法。
演示：http://jsfiddle.net/Garconis/g72a4h03/
参考jQuery中的注释来理解一些推理。
(function($) {
// find each instance of your target
$('p').each(function() {
// now check if the first character is "<" character
// if is NOT a "<" character, then continue
if ($(this).html()[0] != "<") {
// good, now search the contents of the first TEXT_NODE within the selector
var node = $(this).contents().filter(function() {
return this.nodeType == 3
}).first(),
// check the start of the string (which is what the ^ is for)
// find any white space (via the "\s")
// and chunks of contiguous whitespace, which is what the + is for on "\s+"
// and keep finding all instances at the start, which is what the global "/g" is for
// and convert them into nothing
text = node.text().replace(/^\s+/g, ''),
// now start at the beginning (0 position) and grab the first character
first = text.slice(0, 1);
// if the first node isn't a TEXT_NODE, then stop here
if (!node.length)
return;
// remove the text character that we grabbed
node[0].nodeValue = text.slice(first.length);
// now add it back, before the node we checked, with a wrapper
node.before('<span class="fs-dropcap">' + first + '</span>');
};
});
})(jQuery);span.fs-dropcap {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<hr>
<p> "[yo]"This is a test <b> Other HTML <a href="#0;">tester</a> should not be affected by manipulations</b></p>
<hr>
<p> This is a test <b> Other HTML <a href="#0;">tester</a> should not be affected by manipulations</b></p>
<hr>
<p><span>span tag here</span> This is a test <b> Other HTML <a href="#0;">tester</a> should not be affected by manipulations</b></p>
<hr>
<p><a href="#0">test</a> This is a test <b>Other HTML should not be affected by manipulations</b>
</p>
<hr>
<p>This is a test <b>Other HTML should not be affected by manipulations</b></p>
<hr>
<p> This is a test "Other HTML should not be affected by manipulations"
</p>
<hr>
<p><u> tester </u> This is a test "Other HTML should not be affected by manipulations"
</p>