JQuery替换src文本

如何将所有ul>li>ing元素的src文本“web”替换为“mobile”？ 希望将“img/web1.png”更改为“img/mobile1.png”，“img/web2.png”更改为“img/mobile2.png”，“img/web7.png”更改为“img/mobile7.png”等等

<div class="col-md-2">  
      <center><a href="#"><div class="img-circle" id="circle2">Mobile</div></a></center>
      <br/> 
</div>

<div id = "wrapper">
        <ul id = "portfolio">
            <li><img class="img-thumbnail" src="img/web1.png" alt = "img"/></li>
            <li><img class="img-thumbnail" src="img/web2.png" alt = "img"/></li>
            <li><img class="img-thumbnail" src="img/web3.png" alt = "img"/></li>
            <li><img class="img-thumbnail" src="img/web4.png" alt = "img"/></li>
            <li><img class="img-thumbnail" src="img/web5.png" alt = "img"/></li>
            <li><img class="img-thumbnail" src="img/web6.png" alt = "img"/></li> 
            <li><img class="img-thumbnail" src="img/web7.png" alt = "img"/></li> 

            <button id="zoom" type="button" class="btn btn-info"> 
                <span class="glyphicon glyphicon-search"> Zoom </span> 
            </button>
        </ul> 

    </div>

    $("#circle2").click(function(){ 
      $("#portfolio>li").first().children("img").attr("src","img/mobile1.png");
    });

快速移动

$（“#圈2”）。单击（函数（）{
$（“#公文包>li”）.first（）.children（“img”）.attr（“src”、“img/mobile1.png”）；
});

您可以循环查看

li

元素，找到

img

元素，并在

src

属性上执行

replace

$(document).ready(function () {
    $("#circle2").click(function () {

        // Loop through all li elements in the 
        //     element with the id of portfolio
        $("#portfolio").find("li").each(function () {
   
            // Find the image tag
            var img = $(this).find("img");
      
            // Update the src property to the same thing, 
            //       replacing web with mobile
            img.prop("src", img.prop("src").replace("web", "mobile"));

        }); // end li loop
    }); // end change stuff click event
}); // end doc ready

你可以看到一个正在工作的人

参考资料：

---

您可以循环查看

li

元素，找到

img

元素，并在

src

属性上执行

replace

$(document).ready(function () {
    $("#circle2").click(function () {

        // Loop through all li elements in the 
        //     element with the id of portfolio
        $("#portfolio").find("li").each(function () {
   
            // Find the image tag
            var img = $(this).find("img");
      
            // Update the src property to the same thing, 
            //       replacing web with mobile
            img.prop("src", img.prop("src").replace("web", "mobile"));

        }); // end li loop
    }); // end change stuff click event
}); // end doc ready

你可以看到一个正在工作的人

参考资料：

---

这将把

src

文件名中的所有字符（直到第一位）替换为所有

#portfolio>li>img

：

$("#portfolio>li>img").each(function() {
    $(this).attr("src", $(this).attr("src").replace(/[^\/]*?(?=\d*\.png)/, "mobile"));
});

---

这将把所有

#portfolio>li>img的
src
文件名中直到第一位的所有字符替换为“mobile”（根据您上面的评论）：

$("#portfolio>li>img").each(function() {
    $(this).attr("src", $(this).attr("src").replace(/[^\/]*?(?=\d*\.png)/, "mobile"));
});

非常感谢。如果src原始链接是“img/database1.png”或“img/webapp1.png”或“img/image1.png”，有没有办法将所有可能的不同单词替换为src=“img/mobile1.png”呢。问题是，我不知道原来的单词是“数据库、web应用或图像”，也不知道它可以是任何一个单词。如果你不能100%确定会出现什么文本，你可能最好使用正则表达式，但我知道它会以数字结尾。我试过了，但没有成功。我用这个吗？img.prop（“src”，img.prop（“src”）。替换（/[\d.]*/，“mobile”）；非常感谢。如果src原始链接是“img/database1.png”或“img/webapp1.png”或“img/image1.png”，有没有办法将所有可能的不同单词替换为src=“img/mobile1.png”呢。问题是，我不知道原来的单词是“数据库、web应用或图像”，也不知道它可以是任何一个单词。如果你不能100%确定会出现什么文本，你可能最好使用正则表达式，但我知道它会以数字结尾。我试过了，但没有成功。我用这个吗？img.prop（“src”，img.prop（“src”）。替换（/[\d.]*/，“mobile”）；非常感谢。我试过了，它只有在代码为replace（/.*（？=\d+/，“img/mobile”）时才起作用；是否有一种方法，我只需要在img/之后和数字之前替换单词？谢谢。它起作用了。/[^\/]是否意味着找到任何不是“\”的字符？几乎！它是“任何不是
/
的字符”。必须对其进行转义，因为
/
是正则表达式的开始/结束字符。是*？（？=\d*\.png）匹配任何出现了零次或多次.png的单词吗？它匹配任何后跟
XXX.png
（其中X是一个数字）的字符，但它不捕获
XXX.png
。这叫一个。开头的
*？
表示它是，也就是说，它不会超过它必须匹配的范围。这样可以确保它不会消耗任何数字。另一种防止数字捕获的方法是在排除的字符中添加
\d
，即
[^\/\d]*
。谢谢。我试过了，它只有在代码为replace（/.*（？=\d+/，“img/mobile”）时才起作用；是否有一种方法，我只需要在img/之后和数字之前替换单词？谢谢。它起作用了。/[^\/]是否意味着找到任何不是“\”的字符？几乎！它是“任何不是
/
的字符”。必须对其进行转义，因为
/
是正则表达式的开始/结束字符。是*？（？=\d*\.png）匹配任何出现了零次或多次.png的单词吗？它匹配任何后跟
XXX.png
（其中X是一个数字）的字符，但它不捕获
XXX.png
。这叫一个。开头的
*？
表示它是，也就是说，它不会超过它必须匹配的范围。这样可以确保它不会消耗任何数字。防止数字捕获的另一种方法是在排除的字符中添加
\d
，即
[^\/\d]*
。