Question

如何为每个img src添加前缀？

<div id="div_1">
    <h1> Title 1 </h1>
    <div><img src="blah.jpg" /></div>
    <div><p> Lorem Ipsum </p></div>
</div>
<div id="div_2">
    <h1> Title 2 </h1>
    <div><img src="blah2.jpg" /></div>
    <div><p> Lorem Ipsum </p></div>
</div>
<div id="div_3">
    <h1> Title 3 </h1>
    <div><img src="blah3.jpg" /></div>
    <div><p> Lorem Ipsum </p></div>
</div>

每个img src都应如下所示：

<img src="prefix/blah.jpg" />
<img src="prefix/blah2.jpg" />
<img src="prefix/blah3.jpg" />

Answer 1

<强> jQuery的：

使用jQuery更改页面http://jsfiddle.net/aamir/FnPd5/

上的所有图像

$('img').each(function(){ this.src='prefix/'+this.src })

jQuery方式在以div_开头的div中查找图片：http://jsfiddle.net/aamir/FnPd5/2/

jQuery("[id^='div_']").each(function(){
    var img = $(this).find('img')[0];
    img.src='prefix/'+img.src
})

Vanilla Javascript

Vanilla Javascript：http://jsfiddle.net/aamir/FnPd5/1/

var items = document.getElementsByTagName("img");
for (var i = items.length; i--;) {
    var img = items[i];
    img.src='prefix/'+img.src;
}

Vanilla Javascript在以div_开头的div中查找图片：http://jsfiddle.net/aamir/FnPd5/3/

var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++) {
    if(divs[i].id.indexOf('div_') == 0) {
        var img = divs[i].getElementsByTagName("img")[0];
        img.src='prefix/'+img.src;
    }
}

Answer 2

DEMO HERE

$("[id^='div_'] img").each(function(){
  var src = $(this).attr("src");
  var newSrc="prefix/"+src;
  $(this).attr("src",newSrc)
})

Answer 3

$(function(){
  $('img').each(function(i,e){
     $(e).attr('src','prefix/'+$(e).attr('src'));
  });
});

Answer 4

我的解决方案基于您的代码：

$(document).ready(function(){
$('div div img').each(function(){ 
   var imagen = $(this).attr('src') ;
   $(this).attr("src","prefix/"+imagen);
});
});

工作小提琴：http://jsfiddle.net/robertrozas/kR5ZW/

Answer 5

尝试此解决方案。

$('img').each(function(){
    var imgSrc = $(this).attr('src')
    $(this).attr('src','prefix/'+imgSrc);
})

<强> Fiddle Demo

Answer 6

另一种选择：

$('img').attr('src', function(ii, oldSrc) {
    return 'prefix/' + oldSrc;
});

Answer 7

function addPrefixToImg(prefix) {
    $( "img" ).each(function( index ) {
        this.src = prefix + this.src;
    });
}

addPrefixToImg('prefix/');

您可以在http://jsfiddle.net/f32MQ/

上进行测试

使用Javascript / JQuery为img src添加前缀

7 个答案: