0

我正在为我们使用的内部工具在 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>
4

2 回答 2

0

只需循环遍历 中的子元素<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/

于 2013-03-08T20:05:45.923 回答
0

这样的事情可能会奏效：

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

于 2013-03-08T20:06:09.113 回答