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

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

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('' + first + ''); }); 

http://jsfiddle.net/kynt4pot/

Answer 2

使用CSS first-letter选择器

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

这将选择并设置每个

元素的第一个字母。 JS小提琴演示

Answer 3

使用Jquery： http ： //jsfiddle.net/2wkjyz4g/2/

 var x= $(".about p:eq(0)").text(); var text=''+x.charAt(0)+''; $(".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解决方案，你选择了1st（ :eq(0) ）

标签。

@Garconis评论后更新

 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 = '' + txt.charAt(0) + ''; return newTxt + txt.slice(1, txt.length); } styleFirst(parent); 

 .fChar { color:red; } span{ color: blue; } 

  
Winter is here !!!!!!!!!!! 

Answer 4

在得到相同的初始问题之后，我决定采取其他代码的一些部分，并创建我自己的解决方案/答案。 这是我的方法。

演示： 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('' + first + ''); }; }); })(jQuery); 

 span.fs-dropcap { color: red; } 

  
 
 "[yo]"This is a test   Other HTML tester should not be affected by manipulations
 
 
 This is a test   Other HTML tester should not be affected by manipulations
 
 
span tag here This is a test   Other HTML tester should not be affected by manipulations
 
 
test This is a test Other HTML should not be affected by manipulations 
 
 
This is a test Other HTML should not be affected by manipulations
 
 
  This is a test "Other HTML should not be affected by manipulations" 
 
 
  tester   This is a test "Other HTML should not be affected by manipulations"