、私はその要素にあなたがCSSに変更することができる新しいクラスを与え、要素の最初の単語を取ると、その周りにスパンを追加する方法の例をたくさん見てきた要素の最初の単語を選択し、CSS

Question

を変更しかし、私はjQueryで直接CSSを変更する方法を理解できませんでした。

私は今、スパンことを行うために、このコードを使用しています：

$("h1").html(function(i, text){ 
    return text.replace(/\w+\s/, function(match){ 
    return '<span class="first_word"> + match + '</span>; 
}); }); 

私はタイトルの最初の単語新しい色とフォントファミリを作成しようとしています。それは私のh1のために働くが、私はウィジェットのタイトルh3を追加したときに追加されたスパンをプレーンテキストで表示する。だから私はスパンを追加するのではなく最初の単語のCSSを変更したい。 （私も何を「/ \ + \ S/W」ことを説明するようにやっていることは:)おまけだろう見当がつかない）

あなたの賢明なものをありがとうございました！

Answer 1

第1文字のと第1行疑似要素がありますが、最初の単語はありません。あなたはスパンが必要です。

Answer 2

.cssメソッドを使用できます。 cf. http://api.jquery.com/css/

あなたは

$(".first_word").css('color', 'red'); 

またはそのような何かをしたいことがあります。

また、/ \ w + \ s /は単語に空白が続く正規表現です。

Answer 3

2つの質問があります。

どのように私はそれをH1とH3と連携し、2番目の質問は、+ \ S/W正規表現/ \程度であることを確認するために上記のコードを変更することができます。

1）あなたはjQueryの複数のセレクタを使用することができます。

$("h1, h3").html(function(i, text){ 
    return text.replace(/\w+\s/, function(match){ 
    return '<span class="first_word"> + match + '</span>; 
}); }); 

よりドキュメントについて、あなたはJQuery Documentation for multiselectorを見ることができます。

2）/ \ w + \ s /は正規表現です。それは3つの部分の表現です。最初のものは任意の "単語"文字を表す\ wです。これは、[a-zA-Z0-9_]のショートカットです。 2番目は+です。複数の[a-zA-Z0-9_]を持つことができます。これらの文字をグループ化して単語を作成し、最後の部分はスペースが現れるまで単語にマッチすると言う\ sです。このRegex DocumentationにRegex Word Boundaryに関する追加情報を得ることができます。最初の単語の変更については

Answer 4

.....

$('h1').each(function() { 
var jqt = $(this); 
var txt = jqt.text(); 
jqt.html('<span style="font-size:200%">'+txt.substring(0,(txt.indexOf(" ")))+'</span>'+ txt.substring((txt.indexOf(" ")))); 
});