Question

我正在Chrome中为我们使用的内部工具构建扩展程序。我们已经使用了这个工具几年，导航菜单从未在Chrome中运行过。开发人员拒绝修复它。因此，我尝试对我的扩展程序进行的部分操作是用功能菜单替换菜单。

目前菜单包含在DIV中。我想用一个带有工作菜单的新DIV替换整个DIV。起初我认为使用JQuery的replaceWith（）函数很容易，但replaceWith（）似乎只能处理单个代码片段。我能够用一个元素轻松替换整个菜单。然后我遇到.load（）但是我无法成功获取扩展文件夹中的.html文件来实际加载。

我缩短了这个菜单，但它是当前DIV的一个例子：

<div id="ctl00_MasterMenu" class="MenuStyle ctl00_MasterMenu_5" style="height:20px;">
<span class="MenuItemStyle ctl00_MasterMenu_4">
<a class="ctl00_MasterMenu_1 MenuItemStyle ctl00_MasterMenu_3" href="default.aspx" style="border-style:none;font-size:1em;">Home</a>
</span> 
<span class="MenuItemStyle ctl00_MasterMenu_4">
<a class="ctl00_MasterMenu_1 MenuItemStyle ctl00_MasterMenu_3" href="javascript:__doPostBack('ctl00$MasterMenu','o6')" style="border-style:none;font-size:1em;">New Ticket Expand New Ticket</a>
</span> 
</div>

我基本上想用以下内容替换它：

<ul>
<li>Home</li>
<li>New Item</li>
<li>New Item2</li>
</ul>

Answer 1

只需遍历<div>中的孩子，然后将其替换为<li>，最后用<ul>替换父元素：

$(document).ready(function() {
    var $menu = $("#ctl00_MasterMenu");

    $menu.children("span").each(function(index) {
        $(this).replaceWith("<li>"+$(this).html()+"</li>");
    });

    $menu.replaceWith("<ul>"+$menu.html()+"</ul>");
});

请参阅此处的小提琴 - http://jsfiddle.net/teddyrised/fuE37/

Answer 2

这样的事情可能会起到作用：

// store the parent div's info
var $parent = $('#ctl00_MasterMenu');
var parentID = $('#ctl00_MasterMenu').attr('id');
var parentClass = $('#ctl00_MasterMenu').attr('class');
var parentStyle = $('#ctl00_MasterMenu').attr('style');

// create li elements for each of the spans
$parent.children().each(function(index, child){
    $(child).replaceWith('<li class="'+$(child).attr('class')+'">'+$(child).html()+'</li>');
});

// create the ul element and copy the attributes
$parent.children().wrapAll('<ul id="'+parentID+'" class="'+parentClass+'" style="'+parentStyle+'"/>');

// remove the old div
$parent.replaceWith($parent.html());

演示：http://jsfiddle.net/louisbros/aMm5t/1/

使用Chrome扩展程序中的JQuery将自定义DIV替换为整个DIV

2 个答案: