javascript - 用 jQuery 替换同一个类的链接

Question

我正在寻找一种使用 jQuery 替换 18 个链接的方法。

我拥有的是这样的:

    <a class="PDF-link" href="http://domain/0101_xxx.pdf" target="_blank">folder 1</a>
    <a class="PDF-link" href="http://domain/0102_xxx.pdf" target="_blank">folder 2</a>
    <a class="PDF-link" href="http://domain/0201_xxx.pdf" target="_blank">folder 2</a>
    <a class="PDF-link" href="http://domain/0202_xxx.pdf" target="_blank">folder 2</a>
    14 more like this

我从这个 jQuery 开始:

    $(document).ready(function() {
         var client  =  "<%=UserController.GetCurrentUserInfo().Username%>";
         $('.PDF-link').prop('href', $('.PDF-link').prop('href').replace('xxx', client));
    });

但是这会为每个链接生成相同的 URL:

    http://domain/0101_johndoe.pdf
    http://domain/0101_johndoe.pdf
    http://domain/0101_johndoe.pdf
    http://domain/0101_johndoe.pdf

我希望它是这样的:

    http://domain/0101_johndoe.pdf
    http://domain/0102_johndoe.pdf
    http://domain/0201_johndoe.pdf
    http://domain/0202_johndoe.pdf

有人可以帮我吗？

Answer 1

您使用的逻辑将不起作用，因为每次您都会选择整个 .PDF-link 元素组作为一个整体。相反，您可以向 prop 提供一个函数，该函数将为找到的每个单独元素执行:

var client = "<%= UserController.GetCurrentUserInfo().Username %>";
$('.PDF-link').prop('href', function(i, val) {
    return val.replace('xxx', client);
});

Example fiddle