remove last character in id attribute

Question

I am trying to remove the last character from a div id using jquery. Currently I have;

    <div id="foo/"></div>

But I need ;

    <div id="foo"></div>

The character is always a '/' and is generated automatically (re:annoyingly) by the cms I am using, having the '/' there is messing up some javascript linking I am trying to do.

Any help on how to remove or resolve this would be massively appreciated!

Thanks in advance

Answer 1

try:

$("div").each(function(){
    var i=$(this).attr("id");
    if(i){
         i = i.substr(0,i.length-1);
         $(this).attr("id",i);
    }
});

Answer 2

You can select all the divs that have an id attribute, and check if the / character is present at the end, and then remove it:

$('div[id]').each(function(){
    var id = $(this).attr('id');
    if (id.indexOf('/') == id.length-1) {
      $(this).attr('id', id.slice(0, -1));
      // or $(this).attr('id', id.substring(0, id.length-1));
    }
});

Answer 3

This might do it:

$('*').each(function(){
  $(this).attr('id', $(this).attr('id').replace(/\/$/, ''));
});

Replace the * with div or any css selector supported by jquery.

Answer 4

Its easy by using the attribute$= CSS3 selector which means "ends with" in your jQuery selection:

$("div[id$=/]").each(function(){ 
    this.id = this.id.substr(0,this.id.length - 1);
});

Edit: Using Adobe® Browser Lab, I tested this code in IE6, IE7, Firefox 2.0 and Firefox 3.0, Safari 3.0. I have also tested locally in Safari 4.0 and Firefox 3.5. In all browsers it worked properly, and removed the trailing / from the id.