Question

我怎么能写它，以便如果跨度说新手然后它的一种颜色，如果跨度说俱乐部工作人员然后它有另一种颜色？

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

Answer 1

您可以尝试:contains选择器：

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

或each方法：

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

Answer 2

$(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 3

如果你真的想从内容开始工作：

$(".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 4

我会使用CSS类和addClass()

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

Answer 5

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 6

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

jQuery如果每个都有价值

6 个答案: