CODEWITHSUNDEEP
jquery
ngplayground
ngplayground

Reputation: 21617

jQuery if each has value then

How would I be able to write it so that if the span says Newbie then its one color and if the span says Club Staff then it has another color?

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

Upvotes: 0

Views: 544

Answers (6)

Adil Shaikh
Adil Shaikh

Reputation: 44740

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

Upvotes: 0

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

js case sensitive:

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

Demo

js case insensitive:

$('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
}

Upvotes: 1

elclanrs
elclanrs

Reputation: 94101

I would use CSS classes and addClass()

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

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074148

If you really want to work from the content:

$(".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);
    }
});

Note the use of $.trim, which is oddly missing from the other answers here, since your markup may include whitespace on either side of the words in your spans. Your updated markup in the edit will not. But I'd still use $.trim because it doesn't cost much and makes things less delicate.

(Or, of course, rather than css, use addClass so you can control the presentation via stylesheets.)

But I'd really try to find a way to work from something other than the content if you possibly can.

Or more compactly and declaratively:

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);
    }
});

Again, or rather than css, use a classes table rather than a colors table and use addClass, so you can control the presentation via stylesheets, e.g.:

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);
    }
});

Upvotes: 1

Ram
Ram

Reputation: 144669

you can try :contains selector:

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

or each method:

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

Upvotes: 1

Rey Gonzales
Rey Gonzales

Reputation: 856

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

Upvotes: 1

Related Questions