-1

現在、この JavaScript を使用して、各ウィジェット タイトルの 2 番目の単語の色を変更しています。しかし、このコードでは、各ウィジェットをループするときに、ページ上のすべてのウィジェットからすべてのタイトルを各ウィジェット タイトルに出力することになります。たとえば、「Recent Work」と「Recent Press」というタイトルの 2 つのウィジェットがあります。Work と Press はオレンジ色のはずです。このコードでは、Work と Recent が両方ともオレンジ色の "Recent WorkRecent Press" を出力します。これは、両方のウィジェット タイトルで同じように出力されます。これを編集して 2 番目または最後にするにはどうすればよいですか。各タイトルはオレンジ色の 2 語だけの長さになるからです。

var split = $("h4.widgettitle").text().split(" ");

if(split.length > 0) {
$("h4.widgettitle").html('').append("<span class='firstWord'>" + split[0] + "<span> ");

if(split.length > 1) {
    $("h4.widgettitle").append("<span class='secondWord'>" + split[1] + "<span> ");
    for(var i=2;i<split.length;i++) {
        $("h4.widgettitle").append(split[i] + " ");
    }
  }
}
4

2 に答える 2

2

最も速い方法:

$('h4.widgettitle').each(function(){

    var text = $(this).text().split(' ');
    if(text.length < 2)
        return;

    text[1] = '<span class="secondWord">'+text[1]+'</span>';

    $(this).html( text.join(' ') );

});

実行中を参照してください

于 2012-09-05T01:52:55.470 に答える
0

これらの線に沿った何かがうまくいくはずです。タイトルに含まれる単語の数に関係なく、すべての h4.widgettitle 要素の 2 番目の単語が赤色になります。

$("h4.widgettitle").each(function(){
    var title_list = $(this).text().split(" ");
    var new_title = "";
    for (var i = 0; i < title_list.length; i++) {
        if (i == 1) {
            new_title += "<span class='secondWord'>" + title_list[i] + "</span> ";
        } else {
            new_title += "<span class='notSecondWord'>" + title_list[i] + "</span> ";
        }
    }
    $(this).html(new_title);
})​​

フィドルでそれをチェックしてくださいよ

于 2012-09-05T01:55:33.303 に答える