Question

我需要使用jQuery动态替换图像，并知道如何使用jQuery替换图像src值。

但我的主要挑战是找到<img>标记并获取其当前值，因为此HTML内容正在显示某些其他API并且不受我的控制。我可以添加的是外部id的{{1}}属性。

这是系统生成的当前HTML结构：

div

我的目标是找到src的值并用移动设备替换<div id="mysection" class="span-20"> <div class="row"> <img src="/*/desktop/*/images/404.jpg"> </div> </div>，但我不确定如何使用jQuery找到它。所有我都知道jQuery的find方法，但不知道如何做到这一点。

desktop

给我未定义的

Answer 1

要使用img src值：

var srcVal = $( "#mysection" ).find( "img" ).attr('src');

要将桌面更改为移动使用：

$( "#mysection" ).find( "img").attr('src',srcVal.replace('desktop','mobile'));

的 DEMO

Answer 2

尝试使用img

$( "#mysection" ).find( "img" ).attr('src')

Answer 3

不要搜索attr搜索元素。您应该使用img选择器。并使用replace()将值从桌面更改为移动

尝试：

var src=$( "#mysection" ).find( "img" ).attr('src');
src=src.replace("desktop","mobile");
$( "#mysection" ).find( "img" ).attr('src',src);

DEMO

Answer 4

试试这个：

$( "#mysection" ).find( "img" ).each(function(){
   var desktopSrc = $(this).attr('src');
   var mobileSrc = desktopSrc.replace("desktop","mobile");
   $(this).attr('src',mobileSrc);
});

它将在#section元素中找到任何img，并在每个源属性中将桌面替换为移动设备。

Answer 5

试试这个：$( "#mysection" ).find( "img" ).attr('src')。

Answer 6

.find(selector)用于查找匹配selector的某个元素内的元素（匹配class，id，tag等）。在您的情况下，最简单的做法是给img id $('#myImageId').attr('src');和img

修改

对不起，我没注意到你无法改变$('#mysection').find('img').attr('src');属性。在这种情况下，{{1}}应该这样做。

Answer 7

使用.prop( propertyName, function(index, oldPropertyValue) )

Fiddle Demo

$("#mysection").find("img").prop('src', function (_, old) {
    return old.replace("desktop", "mobile");
});

.find()

Answer 8

$("div#mysection img")

这将为您提供div中的所有img个元素。抓住它后，您可以使用.each对它们进行迭代并设置src。

如何使用Jquery搜索元素

8 个答案: