jquery - それぞれに値がある場合はjQuery

Question

スパンが「初心者」の場合は 1 つの色になり、スパンが「クラブ スタッフ」の場合は別の色になるようにするにはどうすればよいでしょうか?

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

Answer 1

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

私はCSSクラスを使用し、addClass()

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

Answer 3

js 大文字と小文字を区別:

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

デモ

js 大文字と小文字を区別しない:

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

デモ

css :

.newbieColor {
    color: yellow;
}

.clubStaffColor {
    color: red
}

Answer 4

本当にコンテンツから作業したい場合：

$(".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、classestable ではなくcolorstable を使用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);
    }
});