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

Question

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

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

javascript只会替换第一个href，但我希望它适用于<a> 的所有id="link"或者你有 jQuery 替代？

<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

使用类名而不是id：

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

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

使用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 class="link" href="http://www.google.co.uk">link</a>

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

并更改href attr，如

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

DEMO

Answer 3

页面上不应该有多个具有相同ID的元素。如果要同时将javascript函数应用于多个元素，则应使用class属性。

Answer 4

使用类越好，但id可以是：

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

Answer 5

补充解决方案。我有一个包含许多记录（tr's）的表，当我用id =“fecharendicion”更改值时，脚本会使用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 6

使用jQuery $.each方法将更改应用于每个单独的<a>标记。这是一个有效的例子：

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