Question

I appologize I am not very versed in Javascript and jquery but what I need to do is find a span with a certain title “Title1” and add a class to that span. I tried several different methods just looking at examples I found by googling but nothing has worked. Anybody got a good example on how to do this. Below is what I think should work?

$('span[@title="Title1"]').each(function(){ 
var $this = $(this); 
// attach the Padding Class
$this.addClass("paddingleft4");
} 
); 

Any help would be appreciated

Answer 1

First of all, there are several different ways to try what you’re doing, however I wouldn’t recommend find elements by title. Title’s are generally meant to hold a string containing information pertinent to the user when they mouse over the element. It would be far better to add a class to your spans before run-time and then search for those spans based on that pre-established class.

Of course, the simplest method is already shown:

$('span[title="Title1"]').addClass('paddingleft4');

However, you could also use a million different possiblities with jQuery’s .filter() function.

As seen on this jsFiddle, I make use of .filter by changing the text of spans that don’t have Title1 inthere title string.

After just reading your comment on your question, I thought i should mention some things in easy commented format:

<script type="text/javascript">
    // jquery equivilant to window.onload = function() { /* do work */ }
    // also = to jQuery's own #(document).ready(function() { /* do work */ })
    $(function() {

        $('span')   //  this is simple jquery call to create an object of all spans on document
        .filter(function(i) {   //  this tells jQuery to take those spans and filter out the ones that dont get returned on the inner function
            //  this is that function
            //  here i use it to see if the spans title
            //      contains the phrase "1L - Students"
            //      if not, then false is return and that
            //      item is removed from our initial jQuery object
            return $(this).attr("title") ? $(this).attr("title").indexOf("1L - Students") != -1 : false;
        })
        .each(function(i) { //  this .each is being used because i'm replace the TEXT of each span left in object with its TITLE string
            $(this).text($(this).attr("title"))
        });
    })
</script>

if span is created dynamically, maybe try placing script at end of body (see comments)