0

私たちが使用する内部ツール用にChromeで拡張機能を構築しています。このツールを数年間使用していますが、Chrome でナビゲーション メニューが機能したことはありません。開発者はそれを修正することを拒否します。したがって、拡張機能でやろうとしていることの一部は、メニューを機能するメニューに置き換えることです。

現在、メニューは DIV でラップされています。その DIV 全体を、作業メニューを備えた新しい DIV に置き換えたいと考えています。最初は、JQuery の replaceWith() 関数を使用するのは簡単だと思っていましたが、replaceWith() は単一のコードでしか機能しないようです。メニュー全体を 1 つの要素に簡単に置き換えることができました。次に、 .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

このような何かがトリックを行うかもしれません:

// 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 に答える
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 に答える