jQuery菜单列表到Breadcrumb

时间：2017-01-20 12:08:05

标签： javascript jquery

我的jQuery Breadcrumb 

Breadcrumb = $(e.target).parentsUntil(".Menu").filter("li").children("a").map(function() {
                 return $(this).html().trim().replace(/Master Dashboard/g,"Dashboard");
             }).get().reverse().join("<li><i class=\"fa fa-arrow-right\"></i></li>");

返回

<i class="fa fa-user fa-2x"></i>
<span class="Title">Account</span>
<span class="Arrow"></span>

<li><i class="fa fa-arrow-right"></i></li>

<i class="fa fa-envelope fa-lg"></i>
<span class="Title">Messages</span>
<span class="Arrow"></span>

<li><i class="fa fa-arrow-right"></i></li>

<i class="fa fa-inbox fa-lg"></i>
<span class="Title">Inbox</span>
<span class="Counter">1,234</span>

需要

<li>
    <i class="fa fa-user fa-2x"></i>
    <span class="Title">Account</span>
</li>
<li><i class="fa fa-arrow-right"></i></li>
<li>
    <i class="fa fa-envelope fa-lg"></i>
    <span class="Title">Messages</span>
</li>
<li><i class="fa fa-arrow-right"></i></li>
<li>
    <i class="fa fa-inbox fa-lg"></i>
    <span class="Title">Inbox</span>
</li>

问题

我已经尝试了几种.wrap("<li></li>")的方法，并从我的痕迹中删除了不需要的<span>...</span>，但都导致了我的脚本崩溃。

如何通过以下方式实现我的“需要”：

  1. 删除所有span.Arrow和span.Counter
  2. 在<li></li>
    3. 中换行每个部分

    现场演示

    $(document).ready(function() {
	"use strict";
	
	$(document).on('click', function(e) {
		var Breadcrumb;
		if ($(e.target).closest($('.Menu')).length) {
 
			Breadcrumb = $(e.target).parentsUntil(".Menu").filter("li").children("a").map(function() {
							return $(this).html().trim().replace(/Master Dashboard/g,"Dashboard");
						 }).get().reverse().join("<li><i class=\"fa fa-arrow-right\"></i></li>");
			
			console.log(Breadcrumb);
		};
	});
});
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="SideNav">
	<!-- === Navigation Menu Starts === -->
	<ul class="Menu">

		<!-- === Minified Nav Starts === -->
		<li class="MinifySideBar" style="display: none;">
			<a href="javascript:;" data-title="Master-Dashboard">
				<i class="fa fa-list-ul fa-2x"></i>
			</a>
		</li>
		<!-- === Minified Nav Ends === -->

		<!-- === Main Dashboard Starts === -->
		<li>
			<a href="javascript:;" data-title="Master-Dashboard">
				<i class="fa fa-home fa-2x"></i>
				<span class="Title">Master Dashboard</span>
			</a>
		</li>
		<!-- === Main Dashboard Ends === -->

		<!-- === User Account Starts === -->
		<li>
			<a href="javascript:;" data-title="Account">
				<i class="fa fa-user fa-2x"></i>
				<span class="Title">Account</span>
				<span class="Arrow"></span>
			</a>
			<ul class="sub-menu First">

				<!-- === User Account Dashboard Starts === -->
				<li>
					<a href="javascript:;" data-title="Account/Dashboard">
						<i class="fa fa-home fa-lg"></i>
						<span class="Title">Dashboard</span>
					</a>
				</li>
				<!-- === User Account Dashboard Ends === -->

				<!-- === User Messages Starts === -->
				<li>
					<a href="javascript:;" data-title="Account/Messages">
						<i class="fa fa-envelope fa-lg"></i>
						<span class="Title">Messages</span>
						<span class="Arrow"></span>
					</a>
					<ul class="sub-menu">
						<li>
							<a href="javascript:;" data-title="Account/Messages/Compose">
								<i class="fa fa-plus fa-lg"></i>
								<span class="Title">Compose</span>
							</a>
						</li>
						<li>
							<a href="javascript:;" data-title="Account/Messages/Inbox">
								<i class="fa fa-inbox fa-lg"></i>
								<span class="Title">Inbox</span>
								<span class="Counter">1,234</span>
							</a>
						</li>
						<li>
							<a href="javascript:;" data-title="Account/Messages/Drafts">
								<i class="fa fa-pencil-square-o fa-lg"></i>
								<span class="Title">Drafts</span>
								<span class="Counter">123</span>
							</a>
						</li>
						<li>
							<a href="javascript:;" data-title="Account/Messages/Trash">
								<i class="fa fa-trash fa-lg"></i>
								<span class="Title">Trash</span>
								<span class="Counter">12</span>
							</a>
						</li>
					</ul>
				</li>
				<!-- === User Messages Ends === -->
			</ul>
		</li>
	</ul>
</div>

1 个答案:

答案 0 :(得分：1)

点击文档更新

$(document).ready(function() {
	"use strict";
	
	$(document).on('click', function(e) {
		var Breadcrumb;
		if ($(e.target).closest($('.Menu')).length) {
 
			Breadcrumb = $(e.target).parentsUntil(".Menu").find('li a').map(function() {
	var el = $(this); // remove second span
	$(el).find('span.Counter,span.Arrow,i').remove();
	$(el).prepend("<i class=\"fa fa-arrow-right\"></i>");
	var tx = $(el).html().replace(/Master Dashboard/g,"Dashboard").replace(/\t/g, "")
	var out = "<li>" + tx + "</li>";
	return out;
}).get().reverse();
			
			console.log(Breadcrumb);
		};
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="SideNav">
	<!-- === Navigation Menu Starts === -->
	<ul class="Menu">

		<!-- === Minified Nav Starts === -->
		<li class="MinifySideBar" style="display: none;">
			<a href="javascript:;" data-title="Master-Dashboard">
				<i class="fa fa-list-ul fa-2x"></i>
			</a>
		</li>
		<!-- === Minified Nav Ends === -->

		<!-- === Main Dashboard Starts === -->
		<li>
			<a href="javascript:;" data-title="Master-Dashboard">
				<i class="fa fa-home fa-2x"></i>
				<span class="Title">Master Dashboard</span>
			</a>
		</li>
		<!-- === Main Dashboard Ends === -->

		<!-- === User Account Starts === -->
		<li>
			<a href="javascript:;" data-title="Account">
				<i class="fa fa-user fa-2x"></i>
				<span class="Title">Account</span>
				<span class="Arrow"></span>
			</a>
			<ul class="sub-menu First">

				<!-- === User Account Dashboard Starts === -->
				<li>
					<a href="javascript:;" data-title="Account/Dashboard">
						<i class="fa fa-home fa-lg"></i>
						<span class="Title">Dashboard</span>
					</a>
				</li>
				<!-- === User Account Dashboard Ends === -->

				<!-- === User Messages Starts === -->
				<li>
					<a href="javascript:;" data-title="Account/Messages">
						<i class="fa fa-envelope fa-lg"></i>
						<span class="Title">Messages</span>
						<span class="Arrow"></span>
					</a>
					<ul class="sub-menu">
						<li>
							<a href="javascript:;" data-title="Account/Messages/Compose">
								<i class="fa fa-plus fa-lg"></i>
								<span class="Title">Compose</span>
							</a>
						</li>
						<li>
							<a href="javascript:;" data-title="Account/Messages/Inbox">
								<i class="fa fa-inbox fa-lg"></i>
								<span class="Title">Inbox</span>
								<span class="Counter">1,234</span>
							</a>
						</li>
						<li>
							<a href="javascript:;" data-title="Account/Messages/Drafts">
								<i class="fa fa-pencil-square-o fa-lg"></i>
								<span class="Title">Drafts</span>
								<span class="Counter">123</span>
							</a>
						</li>
						<li>
							<a href="javascript:;" data-title="Account/Messages/Trash">
								<i class="fa fa-trash fa-lg"></i>
								<span class="Title">Trash</span>
								<span class="Counter">12</span>
							</a>
						</li>
					</ul>
				</li>
				<!-- === User Messages Ends === -->
			</ul>
		</li>
	</ul>
</div>

这个为你输出正确的HTML：

看看现在好吗，欢呼k

相关问题
最新问题