IE splice and join issues

Question

I am using this code to alter the title of an image.

Basically it should split the dashes (there will always be at least one) and take the first part as the title and the remaining dashes as the description.

This works fine in FF but not in IE (tested in v8) it gives me 'Object doesn't support this property or method' on the description line.

I have tried all number of tests but IE just doesn't like parts[0] after it has been spliced. Any ideas?

$('.right ul li img').each(function() {
 parts = $(this).attr('title').split('-');
 title = $.trim(parts[0]);
 parts.splice(0, 1);
 description = $.trim(parts.join('-'));
 title = '<strong>' + title + '</strong><br />' + description;
 $(this).attr('title', title);
});

Answer 1

Have you tried debugging it so that you can inspect "parts" to see what it contains? alert(parts) between the two lines would be a start.

Side comment: you're defining global variables, parts, title, description, where you probably want local variables. Try using the "var" keyword, eg:

var parts = 6;
var notparts = 7;

$('.right ul li img').each(function() {
    parts = ["a", "b"];
    // ...
    var notparts = "foo";
    // ...
});

alert(parts); // => "a, b" alerted
alert(notparts); // => "7" alerted

Answer 2

Not sure about the error, but here is an alternative:

$('.right ul li img').attr('title', function() {
  var parts = this.title.match(/^([^-]+)-?(.*)/);
  if (parts)
    return "<strong>" + $.trim(parts[1]) + "</strong><br />" + $.trim(parts[2]);
  else
    return this.title;
});

Side note: I don't think that HTML markup within the title attribute is allowed/valid.