将JavaScript应用于具有id的所有元素

Question

<a id="link" href="http://www.google.co.uk">link</a>

<a id="link" href="http://stackoverflow.com">link</a>

the javascript only replaces the first href but i want it to apply to any and all <a> with the id="link" OR do you have a jQuery alternative?

<script>
var link = document.getElementById('link');
var src = link.getAttribute('href');
var paramurl = encodeURIComponent(src);
link.setAttribute("href", "http://mysite.com/?url=" + paramurl);
</script>

Answer 1

Use a class-name instead of an id :

<a class="link" href="http://www.google.co.uk">link</a>

<a class="link" href="http://stackoverflow.com">link</a>

With the JavaScript:

var links = document.getElementsByClassName('link');
for (i=0;i<links.length;i++){
    var src = links[i].getAttribute('href');
    var paramurl = encodeURIComponent(src);
    links[i].setAttribute('href','http://mysite.com/?url=' + paramurl);
    /* or, preferably:
    links[i].href = 'http://mysite.com/?url=' + paramurl;
    */
}

JS Fiddle demo .

Answer 2

A complementary solution. I have a table with many records (tr's), when I change the value with id="fecharendicion", the script changes all registers with the class="new_date".

<input id="fecharendicion" name="0" type="date" placeholder="dd/mm/yyyy" />

<script>
   $(document.body).on('change','#fecharendicion', function() {          
   var fecha = $('#fecharendicion').val();
   $('.new_date').val(fecha);
   });
</script>

...
<tr>
  <td><input name="{{a.first.id}}" type="date" class="form-control new_date" /></td>
</tr>
...

Answer 3

use classes instead

<a class="link" href="http://www.google.co.uk">link</a>

<a class="link" href="http://stackoverflow.com">link</a>

and change the href attr like

$("a.link").each(function(){
var src = $(this).attr("href");
var paramurl = encodeURIComponent(src);
$(this).attr("href","http://mysite.com/?url="+paramurl);
});

DEMO

Answer 4

You should not have more than one element with the same id on a page. If you want to apply a javascript function to more than one element at the same time, you should use the class attribute.

Answer 5

The better is use classes, but with id can be:

$(function () {
        $('a[id=link]').each(function () {
            var link = 'http://something' + $(this).attr('href');
            $(this).attr('href', link);
        });
    });

Answer 6

use the jQuery $.each method to apply changes to each separate <a> tag. Here is a working example:

http://jsfiddle.net/T4h2W/1/