jQuery菜单列表到面包屑

Question

我的jQuery面包屑

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>

---

现场演示

 $(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> 

Answer 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