Question

我正在尝试更改我无法控制的小部件的HTML输出。基本上问题是窗口小部件输出的HTML使用了p内部的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更改为内联元素的跨度，然后HTML应该是有效的。我一直在寻找jquery尝试选择类，然后将这些div转换为spans。任何人都可以指出我正确的方向或某人实现类似的教程吗？

Answer 1

将JSFiddle放在一起：

http://jsfiddle.net/daYL4/3/

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

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

Use jQuery to change an HTML tag?

Answer 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/

Answer 3

如果你在CSS中这样做，你不会遭受任何javascript执行时间。

CSS

.widget_output > ul > li > div { display:inline; }

使用jquery将div转换为span

3 个答案: