Question

我有以下HTML：

当前HTML

<div id="testContainer">
 <a href="testPage.htm" target="_top">
    <img src="/res/images/testImage_M.jpg?lc=en-GB&lv=5.jpg" alt="Test" width="153" height="188" class="linkImage" />
 </a>
</div>

我希望能够使用img src，更改部分内容（M.jpg with XXL.jpg）并将父href替换为图像源。

期望的最终结果

<div id="testContainer">
     <a href="/res/images/testImage_XXL.jpg?lc=en-GB&lv=5.jpg" target="_top">
        <img src="/res/images/testImage_M.jpg?lc=en-GB&lv=5.jpg" alt="Test" width="153" height="188" class="linkImage" />
     </a>
    </div>

我知道.attr（）和.removeAttr（），但我不知道如何只更改原始img src的一部分。

Answer 1

你可以这样做：

$(".linkImage").each(function() {
    this.parentNode.href = this.src.replace("_M.jpg", "_XXL.jpg")
});

这会找到所有.linkImage个对象，并且每个对象都会获得img.src值，将_M.jpg更改为_XXL.jpg并将其分配给父链接，因为它{ {1}}。

虽然以上内容适用于您所拥有的确切HTML，但您可以通过以下方式使其更加强大，以防止对HTML的未来调整：

href

这会找到第一个$(".linkImage").each(function() { $(this).closest("a").attr("href", this.src.replace("_M.jpg", "_XXL.jpg")); });标记的祖先，而不是假设<a>标记始终是图像的直接父级。

Answer 2

你需要这样的东西：

$('a').each(function () {
   var src = $('.linkImage', this).attr('src');
   if (src) {
      $(this).attr('href', src.replace('_M.jpg', '_XXL.jpg'));
   }
});

这可能与您需要的元素相匹配。根据您的情况调整选择器。

Answer 3

试试这个

var imgsrc=$('a').find('img').attr('src');
var newsrc=imgsrc.replace("M.jpg","XXL.jpg");

$('a').attr("href",newsrc).find('img').attr('src',newsrc);

Answer 4

使用以下代码更改超链接的网址：

var src = $('img').attr('src').replace('M.jpg', 'XXL.jpg'); 
$('a').attr('href',src);

显示此链接示例：http://jsfiddle.net/nEGTv/4/

通过复制img元素src并在jQuery中更改它来更改img元素的目标href

4 个答案: