如果跨度說jQuery的，如果每個人都有價值，然後

Question

我將如何能夠把它寫讓新手那麼它的一個顏色，如果跨度說，俱樂部的工作人員則有另一種顏色？

<span class="usertitle">Newbie</span> 
<span class="usertitle">Club Staff</span>​ 

Answer 1

JS區分大小寫：

$('span.usertitle:contains('Newbie')').addClass('newbieColor'); 
$('span.usertitle:contains('Club Staff')').addClass('clubStaffColor'); 

Demo

JS不區分大小寫：

$('span.usertitle').html(function() { 
    var text = $(this).text().toLowerCase(); 
    if(text === 'newbie') { 
     $(this).addClass('newbieColor'); 
    } else if(text === 'club staff') { 
     $(this).addClass('clubStaffColor'); 
    } 
}); 

Demo

個

CSS：

.newbieColor { 
    color: yellow; 
} 

.clubStaffColor { 
    color: red 
} 

Answer 2

你可以嘗試:contains選擇：

$(".usertitle:contains('Newbie')") 

或each方法：

$(".usertitle").each(function(){ 
if ($.trim($(this).text()) == 'Newbie') { 
    // $(this).css('color', 'blue') 
} 
}) 

Answer 3

$('.usertitle').each(function(){ 
    var text = $.trim($(this).text()); 
    if(text == "Newbie"){ 
    // one color 
    } 
    else if(text == "Club Staff"){ 
    // another color 
    } 
}); 

Answer 4

$(document).ready(function() { 
    $('.usertitle').each(function() { 
     if ($(this).html() == "Newbie") $(this).css("color","blue"); 
     else if ($(this).html() == "Club Staff") $(this).css("color", "red"); 
    }); 
}); 

http://jsfiddle.net/TgFfm/

Answer 5

如果你真的想從內容工作：

$(".usertitle").each(function() { 
    var $this = $(this); 
    var color; 
    switch ($.trim($this.text())) { 
     case "Newbie": 
      color = "green"; // For instance 
      break; 
     case "Club Staff": 
      color = "red"; // For instance 
      break; 
    } 
    if (color) { 
     $this.css("color", color); 
    } 
}); 

注意使用$.trim，這是奇怪的是從其他的答案缺少在這裏，因爲你的標記可能包括對詞語的兩側空白你的跨度。您在編輯中更新的標記不會。但我仍然使用$.trim，因爲它不會花費太多，並且使事情變得更加脆弱。

（或者，當然，而不是css，使用addClass這樣你就可以控制通過樣式呈現。）

但我真的試圖找到一種方法，從比，如果你的內容以外的東西的工作可能可以。

或者更緊湊，並聲明：

var colors = { 
    "Newbie":  "green", 
    "Club Staff": "red" 
}; 

$(".usertitle").each(function() { 
    var $this = $(this); 
    var color = colors[$.trim($this.text())]; 
    if (color) { 
     $this.css("color", color); 
    } 
}); 

再或者，而不是css，使用classes表，而不是一個colors表並使用addClass，這樣你就可以控制通過樣式呈現，如：

var classes = { 
    "Newbie":  "newbie", 
    "Club Staff": "club-staff" 
}; 

$(".usertitle").each(function() { 
    var $this = $(this); 
    var cls = classes[$.trim($this.text())]; 
    if (cls) { 
     $this.addClass(cls); 
    } 
}); 

Answer 6

我會使用CSS類和addClass()

$('.usertitle').each(function(){ 
    var t = $(this), 
     text = $.trim(t.text()) 
    t.addClass(
    text === 'Newbie' && 'green' || 
    text === 'Club Staff' && 'red' || 
    !text && 'default' 
) 
})