jQuery and selectors in use with specific span tags

Question

jQuery selector

Selecting specific span tags

I had this problem with jQuery's selector. It was a problem for hours. It could not select that specific span tag that I wanted to manipulate and that's why I'm stuck scratching my head with this one.

My goal was to add different classes for each span tag that had different style values. Thus I almost succeeded I couldn't figure out how to add different classes to each span tag, so I ended up clueless.

I basically want the span with font-size of 180% to be in a specific class doesn't matter which really cause I can change that later if the code works. The other span tag with font-size of 100% should also have a class, the other class. I hope you get more clarity in what I'm trying to do now at least that's what I'm hoping for.

The code exists in the link below, feel free to post a fix and optionally but not required a explaination of why it didn't work! thank you.

jQuery Submission: JS Bin Post

Here's the code itself aswell.

    var val1 = "font-size: 180%";
    var val2 = "font-size: 100%";
    var title = $("span").attr("style");
    
    $(function(){
    if ($("span:contains('font-size: 100%')")) {
      $('span').addClass("text_shadow2");
      if ($('span').has("text_shadow1")) {
         $('span').removeClass("text_shadow1");
      }
    }
        if ($("span:contains('font-size: 180%')")) {
           $('span').addClass("text_shadow1");
           if ($('span').has("text_shadow2")) {
               $('span').removeClass("text_shadow2");
           }
        }
        },function(){
        if ($("span:contains('font-size: 100%')")) {
        $('span').addClass("text_shadow2");
        if ($('span').has("text_shadow1")) {
              $('span').removeClass("text_shadow1");
           }
        }
        if ($("span:contains('font-size: 180%')")) {
        $('span').addClass("text_shadow1");
            if ($('span').has("text_shadow2")) {
               $('span').removeClass("text_shadow2");
               }
        }
    });

    if ($(val1==title)) {alert("1. "+title);} 
    if ($(val2==title)) {alert("2. "+title);}

Answer 1

You could do something like this to parse the style attribute. Browsers aren't going to set the font-size property to a percentage but will do the calcs instead

$('span').filter(function(){
    return $(this).attr('style').match('180%');
}).addClass('someClass');

Demo: http://jsfiddle.net/AbZBD/