jquery - DIV 内の特定の文字列を選択してフォーマットする

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.

問題: 次のようなスクリプトを作成したい:

1. すべての「最初」は青色になります
2. すべての「秒」は緑色になります
3. すべての「3 番目」は赤色で太字になります

ここで動作しないコードを参照してください..

コードへのリンクを追加しました

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

これを達成することはほとんど不可能であり、1つの記事または段落で機能した場合、他の記事では機能しません..私の見解では、唯一の解決策は、それらを定義し、jqueryコードを適用するhtmlマークアップを含めることです。

<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 でスタイルを設定することで、スタイルを適用できます (これが理想的です)。

http://jsfiddle.net/RJ8sC/5/の 2 つのバージョンで JSFiddle を作成しました。ラッパーの div 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');
});