Question

我想将我页面上的所有svg图像替换为具有相同名称的其他svg图像，但是在不同的目录中。具体来说，当前图像位于img目录中，我想将图像源替换为img / icon-black。我使用以下选择器获取所有svg元素：

$.svgSelector = $(document).find('img[src$=".svg"]');

我使用以下内容计算新来源：

var newSources = $.svgSelector.map(function(){return $(this).attr("src");}).get();

for(var i = 0; i < newSources.length; i++) {
    newSources[i] = newSources[i].replace(/^.*[\\\/]/, '');
    newSources[i] = "img/icon-black/" + newSources[i];
}

当我想将新来源分配给选择器中的各个元素时，会出现问题。

我想做这样的事情：

for(var j = 0; j < newSources.length; j++) {
    $.svgSelector[i].attr("src", newSources[i]);
}

即。将选择器中每个单独元素的来源分配给相应的新来源。

然而，这种方法不起作用。 .attr（）只返回选择器中的第一个src，你不能像这样在选择器的各个元素上使用它。我也试过.each（）函数，但我无法弄明白。我该如何解决这个问题？

Answer 1

不必将所有src属性映射到新数组，然后遍历数组以替换值，然后在另一个循环中重写源，您可以在一个单独执行迭代块：

$.svgSelector = $(document).find('img[src$=".svg"]');

$.svgSelector.each(function() {
    newImageSrc = "img/icon-black/" + $(this).attr('src').replace(/^.*[\\\/]/, ''); 
    $(this).attr('src', newImageSrc);
});

更好：.attr() function actually takes a callback。从这个意义上说，你甚至可以进一步浓缩它：

$(document).find('img[src$=".svg"]').attr('src', function(i, src) {
    return "img/icon-black/" + src.replace(/^.*[\\\/]/, ''); 
});

jQuery：在选择器个别属性中赋予元素

1 个答案: