使用 jQuery 将完整的 html 锚点替换为另一个 html 锚点

Posted 2023-05-09

【中文标题】使用 jQuery 将完整的 html 锚点替换为另一个 html 锚点

【英文标题】：Replace full html anchor with another html anchor using jQuery

【发布时间】：2014-09-09 10:43:12

【问题描述】：

我有一个锚标签

<a class="contextMenuInnerItem hrefLockProposal" onclick="" href="javascript:void(0)">Locking</a>

我必须用下面的替换这个锚标记

var Temphtml= "<a class='contextMenuInnerItem' onclick='LockProposal(" + PKProposalId + ", 1)' href='javascript:void(0)'>Lock</a>"

我这样做了

htmlString=htmlString.replace("<a class='contextMenuInnerItem hrefLockProposal' onclick='' href='javascript:void(0)'>Locking</a>",TempHtml);

htmlString 包含大量来自数据库的字符串。

这是我的 htmlString，来自数据库

<div><ul class="pmenubar"><li><div class="trigger" style="color:gray;border-right:0px; font-size:12px;" onclick=""></div><ul class="contextMenuInner"><li><a class="contextMenuInnerItem" onclick="RedirectPage(ProposalId,11,1);" href="javascript:void(0)">Settings</a></li><li><a class="contextMenuInnerItem" onclick="RedirectPage(ProposalId,23,1);" href="javascript:void(0)">Details</a></li><li><a class="contextMenuInnerItem" onclick="RedirectPage(ProposalId,17,1);" href="javascript:void(0)">Add Products</a></li><li><a class="contextMenuInnerItem" onclick="RedirectPage(ProposalId,18,1);" href="javascript:void(0)">QuickSpec</a></li><li><a class="contextMenuInnerItem hrefReportProposal" onclick="RedirectPage(ProposalId,19,1);" href="javascript:void(0)">Print Setup</a></li><li><a class="contextMenuInnerItem hrefReportProposal" onclick="RedirectPage(ProposalId,44,2);" href="javascript:void(0)">Print</a></li><li><a class="contextMenuInnerItem hrefExportProposal" onclick="RedirectPage(ProposalId,22,0);" href="javascript:void(0)">Export</a></li><li><a class="contextMenuInnerItem hrefCopyProposal" onclick="RedirectPage(ProposalId,24,1);" href="javascript:void(0)">Duplicate</a></li><li><a class="contextMenuInnerItem hrefReportProposal" onclick="RedirectPage(ProposalId,45,1);" href="javascript:void(0)">Preview</a></li><li><a class="contextMenuInnerItem" onclick="RedirectPage(ProposalId,52,1);" href="javascript:void(0)">Print Setup (Beta)</a></li><li><a class="contextMenuInnerItem" onclick="RedirectPage(ProposalId,53,1);" href="javascript:void(0)">QuickSpec(Old)</a></li><li><a class="contextMenuInnerItem" onclick="RedirectPage(ProposalId,43,1);" href="javascript:void(0)">Add Products(Old)</a></li><li><a class="contextMenuInnerItem" onclick="RedirectPage(ProposalId,49,1);" href="javascript:void(0)">Details(Old)</a></li><li><a class="contextMenuInnerItem hrefDeleteProposal" onclick="RemoveProposal(ProposalId)" href="javascript:void(0)">Remove</a></li><li id="ancLockProposal">**<a class="contextMenuInnerItem hrefLockProposal" onclick="" href="javascript:void(0)">Locking</a>**</li></ul></li></ul></div>

如您所见，htmlString 中的最后一个锚标记与我要替换的相同。如何实现？请帮助。

【问题讨论】：

replace 中的参数应该是字符串。

。 . .so 你替换了，然后发生了什么

@MichalLeszczyk 是的，它们只是字符串。我现在更正了代码。

在 htmlString 中使用引号，在 TempHtml 中使用撇号表示属性值。

@Arjuna 它给了我相同的 htmlString 没有替换。但是如果我用 TempHtml 替换任何元素，如“li”，或者用 TempHtml 替换任何锚标记文本，如“Lock”，那么它会正常并替换内容。但我想要的并没有发生同样的事情。

【参考方案1】：

最后一个 li 元素，包含要替换的锚标记，首先将其清空，然后附加要添加的锚标记。

$("#ancLockProposal").empty();
$("$ancLockProposal").append("<a class='contextMenuInnerItem' 
   onclick='LockProposal(" + PKProposalId + ", 1)' href='javascript:void(0)'>Lock</a>");

希望这会有所帮助。

【参考方案2】：

您需要进行以下更改：

htmlString=htmlString.replace(/<a class='contextMenuInnerItem hrefLockProposal' onclick='' href='javascript:void(0)'>Locking<\/a>/g,TempHtml);

【讨论】：

不，这对我仍然不起作用。我在控制台中检查并发现了相同的 htmlString 值。 :P

我得到了解决方案。我们可以先清空存在可替换“a”的“li”，而不是替换来自数据库的字符串部分。我这样做了：- $("#ancLockProposal").empty(); //清空可替换“a”标签的父“li”。 $("#ancLockProposal").append(TempHtml);//清空后追加要替换的字符串，这里是TempHtml。

如果这对您有用，请发布您对此问题的答案并将其标记为已接受的答案！ ;)

【参考方案3】：

我不会使用替换。由于您将此标记为 jquery：

$('#ancLocProposal').next('a').text('Lock').click( function() LockProposal(PKProposalId, 1);  );

您可能需要使用闭包，具体取决于 PKProposalId 的范围/用法：

(function(PKProposalId)$('#ancLocProposal').next('a').text('Lock').click( function() LockProposal(PKProposalId, 1);  );)(PKProposalId);

.. 或者您使用数据属性。

【参考方案4】：

试试这个，它会在你的 div 标签中获取最后一个锚标签对象

var totalACount= $('div a').length-1;
var lastAncher = $('div a:eq('+totalACount+')'); 
alert($(lastAncher).attr("href"));

如果锚标记中存在属性，您可以访问类、id、单击任何您想要的东西。 访问对象后可以替换对象。