Question

我需要在运行时将span标记更改为img标记。

这是我的html块：

<body onload="mediaInputFilter ()">
<section data-role="page" data-theme="ams">
    <section data-role="header" >
        <h1>header ssssssssssssssssssssssssssssss sssssssssssssssssssssss ssssssssssssssssssssssssss ssssssssssssssss ssssssssssss</h1>

    </section>
    <section data-role="conents" id="mycontent" >
        <p>loruim epsum haha&nbsp;</p>\n<p>hehe told u&nbsp;</p>\n<ol class="starpasspro-upper-alpha_ol">\n<li>gasdfg</li>\n<li>sdfffasd</li>\n<li>asdfffasdf</li>\n<li>asdfasdfasdfasd</li>\n</ol>\n\n<table class="table_with_header lsm-tableclass-styles">\n<tbody>\n<tr>\n<td class="lsm_table_heading_1">Description</td>\n<td class="lsm_table_heading_1">Amount</td>\n</tr>\n<tr>\n<td>Gross salary</td>\n<td>&nbsp;xxxx</td>\n</tr>\n<tr>\n<td>Less: income tax (£35,000 x 25%)</td>\n<td>&nbsp;xxxx</td>\n</tr>\n<tr>\n<td>Less: social security tax (£50,000 x 9%)</td>\n<td>&nbsp;xxxx</td>\n</tr>\n<tr>\n<td>Net earnings</td>\n<td>&nbsp;xxxx</td>\n</tr>\n<tr>\n<td>Employer’s contribution on social security<br>(£50,000 x10.5%)</td>\n<td>&nbsp;xxxx</td>\n</tr>\n</tbody>\n</table>\n\n
        <p><span data-lscp-resource-mimetype="image/png" data-lscp-resource-id="00001"></span></p>


    </section>
    <section data-role="footer">
        <p>footer</p>

    </section>
</section>

执行html后，所有span标记都需要自动转换为img标记。

我尝试了这一点，反过来它确实有效但在这种情况下它无法正常工作。

这是我的js（这是用jQuery编写的）

 function mediaInputFilter(){
        $($("section[data-role='conents']").html()).find("span[data-rcb-resource-mimetype^=image]").each(function (i,node) {

        var imgNode = $(node);
        var src = '../images/00001.png';
        var spanNode = $("<span/>");

        spanNode.attr("data-rcb-resource-mimetype", imgNode.attr("data-rcb-resource-mimetype"));
        spanNode.attr("data-rcb-resource-id", imgNode.attr("data-rcb-resource-id"));
        spanNode.attr("src", src);

        imgNode.after(spanNode);
        imgNode.remove();
    });
}

对此有任何帮助，请告诉我我错在哪里，或者如果你有另一个解决方案，我会打开。

Answer 1

您的更改不会保留，因为您对此代码运行后立即销毁的节点进行了更改。

请参阅http://learn.jquery.com/javascript-101/scope/

解决方案：

替换

$($("section[data-role='conents']").html()).find("span[data-rcb-resource-mimetype^=image]").each(function (i,node) {

使用

$("section[data-role='conents']").find("span[data-rcb-resource-mimetype^=image]").each(function (i,node) {

如何在执行DOM后更改标记

1 个答案: