如何將所有ul> li> ing元素的src文本「web」替換爲「mobile」？想將「img/web1.png」改爲「img/mobile1.png」，「img/web2.png」改爲「img/mobile2.png」，「img/web7.png」改爲「img/mobile7。 PNG「等。jQuery替換src文本

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

2015-04-02 user21

你可以通過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

你可以看到一個工作JSFiddle here

參考文獻：

來源

2015-04-02 00:36:44 silencedmessage

謝謝。如果src的原始鏈接是「img/database1.png」，或者「img/webapp1.png」或者「img/image1.png」，那麼該怎麼辦？我是否可以將所有可能的不同單詞替換爲src =「 IMG/mobile1.png」。問題是我不知道原始單詞是「數據庫還是網絡應用程序或圖像」，或者它可能是任何單詞 – user21 2015-04-02 00:50:25

如果您不是100％確定哪些文本會出現，那麼您最好使用正則表達式，但知道它會以數字結尾。 http://stackoverflow.com/questions/3890680/jquery-regex-replace-from-select-text – silencedmessage 2015-04-02 00:52:17

我試過但不能。我使用這個嗎？（「src」，img.prop（「src」）。replace（/ [\ d。] * /，「mobile」））; – user21 2015-04-02 00:58:33

這將替換所有字符在src文件名上升到第數字與「移動」（如上所述）#portfolio>li>img：

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

來源

2015-04-02 01:14:53

謝謝。我試過了，它只在代碼替換時才起作用（/.*？（？= \ d +）/，「img/mobile」））;有沒有一種方法，我只需要在img /和數字之前替換單詞？ – user21 2015-04-02 01:19:50

謝謝。有用。/[^ \ /]是否表示查找任何不是'\'的字符？ – user21 2015-04-02 01:37:46

差不多！它是「任何不是'/'的字符」。它必須被轉義，因爲'/'是正則表達式的開始/結束字符。 – 2015-04-02 01:39:31

jQuery替換src文本

回答

參考文獻：

相關問題