Question

div中的示例文本：

I am at the first line.
I am at the second line.
I am at the third line.
I am at the end of the first paragraph.

问题：我想创建一个脚本：

所有“first”将为蓝色

所有“秒”将显示为绿色

所有“第三个”将显示为红色并且为BOLD

Please see the non working code here..

添加了代码

的链接

Answer 1

你去吧

$(function(){   
  $('#text').attr('value','first').css('color','#0000FF');
  $('#text').attr('value','second').css('color','#00FF00');
  $('#text').attr('value','third').css('color','#FF0000');
  $('#text').attr('value','third').css('font-weight','bold');
});

Answer 2

这几乎是不可能实现的，如果为一篇文章或段落工作，它将无法为另一篇文章工作.. 在我看来，唯一的解决方案是包括一个html标记，它将定义那些，然后为它们应用jquery代码，

<p class='paragraph'>
<span class='firstline'>This is the first line.</span>
<span class='secoundline'> This is the second line. </span>
<span class='thirdline'> This is the third line.</span>
<span class='endparagraph'>This is the end of the first paragraph.</span>
</p>

现在在jquery部分，您可以执行类似

的操作

$(function(){
  $('.firstline').css({'color':'blue' , 'font-weight':'bold'});
  .....

})

Answer 3

您可以使用jQuery :nth-child选择器执行此操作。您可以使用css（）或通过向段落添加类来应用样式，并使用CSS设置样式（这将是理想的）。

我创建了一个包含两个版本的JSFiddle：http://jsfiddle.net/RJ8sC/5/。你只需要将包装div ID更改为你的ID，你就应该好了。

这是用于快速参考的jQuery代码：

$(document).ready( function() {
    $('#example p:nth-child(1)').css('color','blue');
    $('#example p:nth-child(2)').css('color','green');
    $('#example p:nth-child(3)').css({color:'red', 'font-weight': 'bold'});
});

// ALTERNATIVE USING CLASSES - THIS IS BETTER PRACTICE

$(document).ready( function() {
    $('#example2 p:nth-child(1)').addClass('first');
    $('#example2 p:nth-child(2)').addClass('second');
    $('#example2 p:nth-child(3)').addClass('third');
});

选择DIV中的特定字符串并对其进行格式化

3 个答案: