如何用 jQuery 替换图像列表？答案

【问题标题】：How to replace a list of images with jQuery?如何用 jQuery 替换图像列表？
【发布时间】：2016-02-25 04:34:02
【问题描述】：

我想通过将名称从 "portrait.jpg" 更改为 "landscape.jpg" 后跟序列号来替换列表项中的图像。

例如：

<img src="images/slider_01_portrait.jpg">
<img src="images/slider_02_portrait.jpg">
<img src="images/slider_03_portrait.jpg">
<img src="images/slider_04_portrait.jpg">
<img src="images/slider_05_portrait.jpg">

改为↓

<img src="images/slider_01_landscape.jpg">
<img src="images/slider_02_landscape.jpg">
<img src="images/slider_03_landscape.jpg">
<img src="images/slider_04_landscape.jpg">
<img src="images/slider_05_landscape.jpg">

这是我的代码：

<div class="slider fullscreen">
    <ul class="slides">
        <li>
            <img src="images/slider_01_portrait.jpg">
        </li>
        <li>
            <img src="images/slider_02_portrait.jpg">
        </li>
        <li>
            <img src="images/slider_03_portrait.jpg">
        </li>
        <li>
            <img src="images/slider_04_portrait.jpg">
        </li>
        <li>
            <img src="images/slider_05_portrait.jpg">
        </li>
    </ul>
</div>

【问题讨论】：

$('img[src*="portrait"]').attr('src', function (i, oldSrc) { return oldSrc.replace('portrait', 'landscape'); }); Demo

标签： jquery image replace src sliders

【解决方案1】：

var img = $('img');
for (var i = 0; i < img.length; i++) {
  var src = $(img[i]).prop('src').replace('portrait', 'landscape');
  $(img[i]).prop('src', src);
}

希望对您有所帮助！

【讨论】：

【解决方案2】：

你可以的，

var ul = $("<ul/>", {class: 'slides'});
$("img").each(function () {
    $(this).attr("src", $(this).attr("src").replace("portrait", "landscape"));
    var li = $("<li/>");
    li.append(this);
    ul.append(li);
});
$(".slider").append(ul);

Fiddle

【讨论】：