javascript - 使用 jQuery 将完整 html anchor 替换为另一个 html anchor

Question

我有一个 anchor 标记

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

我必须用以下内容替换这个 anchor 标记

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 中的最后一个 anchor 标记与我想要替换的相同。如何实现这一点？请帮忙。

Answer 1

最后一个 li 元素，包含您要替换的 anchor 标记，首先清空该元素，然后附加您要添加​​的 anchor 标记。

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

希望这有帮助。