javascript - jQuery .each()span.Title get .text()用“/”连接

直播片段

$(document).ready(function() {
    "use strict";
    var PushState, Current;

    $(document).on('click', function(e) {
        if ($(e.target).closest($('.page-breadcrumb')).length) {
            $(e.target).closest('li').nextAll().remove();
            PushState = $('.page-breadcrumb').children('li').each(function() {
                return $(this).children().find('span.Title').text();
            }).get().join("/");
            console.log(PushState);
            Current = $(e.target).closest('a').html();
            $(e.target).closest('li').remove();
            $('.page-breadcrumb').append(Current);
        }
    });
});

.page-bar {
    box-sizing:border-box;
    position: relative;
    width:100%;
    height:61px;
    padding: 0 20px;
}
.page-bar .page-breadcrumb {
    display: inline-block;
    float: left;
    padding: 20px 0;
    margin: 0;
    list-style: none;
}
.page-bar .page-breadcrumb>li {
    display: inline-block;
}
.page-bar .page-breadcrumb>li,
.page-bar .page-breadcrumb>li a {
    font-size: 14px;
    color: #A3A3A3;
    text-decoration: none;
}
.page-bar .page-breadcrumb>li a:hover {
    text-decoration: underline;
}
.page-bar .page-breadcrumb>li>i.fa-arrow-right {
    font-size: 12px;
    margin: 0 5px;
    position: relative;
    opacity: .4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<div class="page-bar">
    <div class="page-breadcrumb">
        <li>
            <a href="javascript:;"> <i class="fa fa-home"></i> <span class="Title">Dashboard</span> </a>
        </li>
        <li><i class="fa fa-arrow-right"></i></li>
        <li>
            <a href="javascript:;">
                <i class="fa fa-user"></i>
                <span class="Title">Account</span>
            </a>
        </li>
        <li><i class="fa fa-arrow-right"></i></li>
        <li>
            <a href="javascript:;">
                <i class="fa fa-envelope"></i>
                <span class="Title">Messages</span>
            </a>
        </li>
        <li><i class="fa fa-arrow-right"></i></li>
        <li></li>
        <i class="fa fa-plus"></i>
        <span class="Title">Compose</span>
    </div>
</div>

结果

根据您单击的位置，结果如下（我单击了“帐户”）：


  [对象HTMLLIElement] / [对象HTMLLIElement] / [对象HTMLLIElement]




我正在努力实现的目标


如果$(e.target)是$('.page-breadcrumb li a')


启动脚本当前执行的所有操作
PushState应该返回（单击“消息”示例）：


资讯主页/帐户/讯息






问题

如何仅返回所有以'/'连接的span.Title的文本？

最佳答案

在每个回调中使用return会导致您丢失数据。

PushState = $('.page-breadcrumb').children('li').each(function() {
              return 0;
            }).get().join("/");

您仍然会得到相同的结果，因为您得到的只是外部<li>元素。因此，与其返回使用某些变量，您可以在其中存储each回调的各个结果，而不是返回

在var v =[];之外制作一些全局变量如each并使用以下修改

$('.page-breadcrumb').children('li').each(function() {
    var txt = $(this).children().find('span.Title').text();
    if(txt != '')
      v.push(txt);
});

PushState = v.join('/');

关于javascript - jQuery .each()span.Title get .text()用“/”连接，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41779807/