Question

I have a div that contains links(dynamic) and want when users clicked on a link to delete the path from the href attrybute and to add another.

For example: I want to convert this:

<div id="example"> 
<a href="/some path/page_id=8">Link1</a>
<a href="/some path/page_id=8">Link2</a>
<a href="/some path/page_id=8">Link3</a>
......

</div>

to :

<div id="example"> 
<a href="/some path/ANOTHER_PATH">Link1</a>
<a href="/some path/ANOTHER_PATH">Link2</a>
<a href="/some path/ANOTHER_PATH">Link3</a>
......

</div>

I’m a nooby in php and javascript, so any help would be greatly appreciated.

Thanks

Answer 1

This should work for you (assuming you have jQuery)

$("#example a").click(function(){
    var href = $(this).attr('href');
    $(this).attr('href', href.replace('/some path', '/some path/ANOTHER_PATH'));
});

See it working here on jsFiddle

---

EDIT

If you need a native JavaScript version, here you go

var e = document.getElementById('example');
var links = e.getElementsByTagName('a');

for(x in links){
    links[x].onclick = function(){
        this.href = this.href.replace('/some%20path', '/some%20path/ANOTHER_PATH');
    };
}

See it working here on jsFiddle
​