我所有的html都需要修改。这是我的HTML
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
<div class="nav-collapse collapse">
<ul class="nav-pills SC-Topmenu nav">
<div class="top-nav ">
<div class="title-bar">
<div data-original-title="Doubleclick for edit" class="title username editable editable-click" data-type="text" data-pk="" data-url="/post" rel="tooltip" data-placement="bottom">Home</div>
</div>
<div class="panel"></div>
</div>
<div style="display: inline-block;" class="top-nav">
<div class="title-bar">
<div style="display: block;" data-original-title="Doubleclick for edit" class="title username editable editable-click editable-unsaved" data-type="text" data-pk="" data-url="/post" rel="tooltip" data-placement="bottom">Categorys</div>
</div>
<div class="panel"></div>
<div style="display: table-cell;" class="jstree jstree-8 jstree-2">
<ul>
<li id="Li7" class="Root jstree-last jstree-open"><ins class="jstree-icon"> </ins><a href="javascript:void(0)" class="Titleanchor"><ins class="jstree-icon"> </ins>Title1</a>
<ul class="MenuContentholder">
<li><a><ins class="jstree-icon"> </ins>1</a></li>
<li><a><ins class="jstree-icon"> </ins>2</a></li>
</ul>
</li>
</ul>
</div>
<div style="display: table-cell;" class="jstree jstree-10 jstree-focused jstree-4">
<ul>
<li id="Li6" class="Root jstree-last jstree-open"><ins class="jstree-icon"> </ins><a href="javascript:void(0)" class="Titleanchor"><ins class="jstree-icon"> </ins>Title2</a>
<ul class="MenuContentholder">
<li><a><ins class="jstree-icon"> </ins>1</a></li>
<li><a><ins class="jstree-icon"> </ins>2</a></li>
</ul>
</li>
</ul>
</div>
<div style="display: table-cell;" class="jstree jstree-7 jstree-1">
<ul>
<li id="Li5" class="Root jstree-last jstree-open"><ins class="jstree-icon"> </ins><a href="javascript:void(0)" class="Titleanchor"><ins class="jstree-icon"> </ins>Title3</a>
<ul class="MenuContentholder">
<li><a><ins class="jstree-icon"> </ins>1</a></li>
<li><a><ins class="jstree-icon"> </ins>2</a></li>
</ul>
</li>
</ul>
</div>
<div style="display: table-cell;" class="jstree jstree-9 jstree-3">
<ul>
<li id="Li4" class="Root jstree-last jstree-open"><ins class="jstree-icon"> </ins><a href="javascript:void(0)" class="Titleanchor"><ins class="jstree-icon"> </ins>Title4</a>
<ul class="MenuContentholder">
<li><a><ins class="jstree-icon"> </ins>1</a></li>
<li><a><ins class="jstree-icon"> </ins>2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</ul>
</div>
</div>
上面的html应该像这样转换
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
<div class="nav-collapse collapse">
<ul class="nav-pills SC-Topmenu nav">
<li><a href="Index.html">Home </a></li>
<li><a href="Index.html">Categorys </a>
<div>
<ul>
<h3>Title1</h3>
<li><a>1</a></li>
<li><a>2</a></li>
</ul>
<ul>
<h3>Title2</h3>
<li><a>1</a></li>
<li><a>2</a></li>
</ul>
<ul>
<h3>Title3</h3>
<li><a>1</a></li>
<li><a>2</a></li>
</ul>
<ul>
<h3>Title4</h3>
<li><a>1</a></li>
<li><a>2</a></li>
</ul>
<ul>
<h3>Title5</h3>
<li><a>1</a></li>
<li><a>2</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
所有属性应该被删除所有元素到目前为止我一直在尝试这个,但我不是很难得到完整的输出有一些问题可以任何人帮助我
$('.top-nav').each(function () {
var container = $(this);
//$(container).find('.custom-content').each(function () { var custom_content = $('.custom-content').html(); $(container).find('.MenuContentholder').append('<li><a href="javascript:void(0)">' + custom_content + '</a></li>'); });
$(container).find('.jstree-icon').addClass('icon');
$(container).wrap('<div></div>')
$(container).wrap('<li></li>');
$(container).find('.title').wrap('<a href="#" class="SC-Title"><a>');
//$(container).find('.widget-controls').remove();
$(container).find('.SC-Title').html($(container).find('.SC-Title').children().html());
$(container).find('.Root').parent('ul').unwrap();
$(container).find('.SC-Title').unwrap();
//$(container).find('ul').parent('div').children('ul').unwrap();
//$('.panel').remove();
alert($('.' + Areaclassselector).html());
$('.Titleanchor').each(function () {
$(this).html('<h3>' + $(this).html() + '</h3>');
$(this).find('h3').unwrap();
});
$(container).find('ins').remove();
});
答案 0 :(得分:0)
我觉得这么傻,但实际上我已经为你做了。你走了;
<强>的JavaScript 强>
$(document).ready(function() {
var new_menu = '';
$('.SC-Topmenu .top-nav').each(function() {
var menuItem = $(this);
var menuItemName = $('.title-bar div', this).html();
new_menu += '<li><a href="Index.html">' + menuItemName + '</a>';
counter = 0;
$('[id^=Li]', this).each(function() {
var subMenuItem1 = $(this);
var subMenu1Name = $('.Titleanchor', this).html().split('</ins>')[1];
var subMenu1Href = $()
if (counter == 0) {
new_menu += '<div>';
}
new_menu += '<ul>';
new_menu += '<h3>' + subMenu1Name + '</h3>';
$('ul li', this).each(function() {
var subMenuItem2 = $(this);
var subMenuItem2Name = $('a', this).html().split('</ins>')[1];
new_menu += '<li><a>' + subMenuItem2Name + '</a></li>';
});
new_menu += '</ul>';
if (counter == subMenuItem1.length - 2) {
new_menu += '</div>';
counter = 0;
}
counter++;
});
new_menu += '</li>';
});
$('.SC-Topmenu').html(new_menu);
});