jquery 如何用each替换元素的attr href

bprjcwpo  于 2023-08-04  发布在  jQuery
关注(0)|答案(3)|浏览(129)

我想更改HTML字符串中的href URL。
但是它打印旧的URL而不是test.php

var html='<div><a href="https://www.spectrum.net/support/manage-account/creating-username?cid=eml_ehh_60_0621">find out how</a></div>';

$(html).find('a').each(function(){
    var newUrl = "test.php";
    $(this).attr("href", newUrl);
});
console.log(html);

个字符
输出:
第一个月
它打印相同的URL,它没有改变到新的URL test.php
预期输出:
<div><a href="test.php">find out how</a></div>

gmol1639

gmol16391#

您面临的问题是您正在修改HTML字符串html,但您没有更新元素的原始HTML内容。当使用$(html)时,它会用HTML字符串创建一个新的jQuery对象,但使用.attr()所做的更改不会影响原始的html变量。
要获得预期的输出,需要在将html变量转换为jQuery对象之前,通过更新href属性直接修改该变量。以下是您的操作方法:

var html = '<div><a href="https://www.spectrum.net/support/manage-account/creating-username?cid=eml_ehh_60_0621">find out how</a></div>';

// Convert the HTML string to a jQuery object
var $html = $(html);

// Use .each() to loop through each <a> element and update its href attribute
$html.find('a').each(function() {
  var newUrl = "test.php";
  $(this).attr("href", newUrl);
});

// Convert the updated jQuery object back to an HTML string
var updatedHtml = $html.prop('outerHTML');

console.log(updatedHtml);

个字符
现在,updatedHtml将包含预期的输出:

<div><a href="test.php">find out how</a></div>


通过更新jQuery对象,然后将其转换回HTML字符串,可以保留对href属性所做的更改。

k5ifujac

k5ifujac2#

使用replace更改URL。
示例如下:

var html = '<div><a href="https://www.spectrum.net/support/manage-account/creating-username?cid=eml_ehh_60_0621">find out how</a></div>';

$(html).find('a').each(function(i, ...v) {
  var Url = $(this).attr('href');
  var newUrl = "test.php";
  html = html.replace(Url, newUrl);
});
console.log(html);

个字符

8hhllhi2

8hhllhi23#

如果你想在HTML上应用它,你可以使用这个:

$('div').find('a').each(function(){
    var newUrl = "test.php";
    $(this).attr("href", newUrl);
    var URL = $(this).attr("href");
    $(this).text("find out how -> "+URL);
});

个字符

相关问题