javascript - 使用 Javascript/JQuery 添加前缀到 img src

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 })

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

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

<小时/>

普通 JavaScript

普通 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;
    }
}