12

我正在尝试更改我无法控制的小部件的 HTML 输出。基本上问题是小部件输出的 HTML 在 ap 中使用了无效的 div。

<div class="widget_output">
    <ul>
        <li>
            <p>
                <div>This is a random item</div>
                <div>This is a random item</div>
                <div>This is a random item</div>
                <div>This is a random item</div>
            </p>
       </li>
       <li>
            <p>
                <div>This is a random item</div>
                <div>This is a random item</div>
                <div>This is a random item</div>
                <div>This is a random item</div>
            </p>
        </li>
</div>

我的想法是将 div 更改为作为内联元素的 span，然后 HTML 应该是有效的。我一直在查看 jquery 以尝试选择类，然后将这些 div 转换为 span。谁能指出我正确的方向或某人实现类似目标的教程？

4

2 回答 2

19

只是将一个 JSFiddle 粘在一起：

http://jsfiddle.net/dayL4/3/

$(".widget_output div").replaceWith(function() { 
    return "<span>" + this.innerHTML + "</span>"; 
});

似乎比我原来的建议工作得更好。但是看看这个相关问题的答案，因为它们涵盖了一些优点：

使用 jQuery 更改 HTML 标签？

于 2012-07-29T07:10:09.760 回答
2

您不需要 jQuery，您可以简单地使用正则表达式将<div>标签替换为<span>标签。试试这个：

var widgetHTML = $('div.widget_output').html();
    widgetHTML = widgetHTML
       .replace(/<div>/g, '<span>')
       .replace(/<\/div>/g, '</span>');
$('div.widget_output').html(widgetHTML);

演示：http: //jsfiddle.net/codef0rmer/daYL4/3/

于 2012-07-29T07:59:54.703 回答