如何通过单击每个'a'元素来获取所有文本？

Question

我正在研究MVC 5项目，如果用户点击照明，则显示 Mep服务＆gt;电气＆gt;点亮或者甚至点击 HT＆amp; LT 然后显示 Mep服务＆gt;电气＆gt;照明＆gt; HT＆amp; LT 就是这样。

我试过下面的jQuery代码，它运行正常。但是“Mep服务”现在还没有显示出来。

 $(".breadcrumb-list").click(function () {
        
        var bc = '<ul class="breadcrumb">';

        var index = $(this).parent().index();
        
        $(this).closest("ul").find("li").each(function (i, x) {
            if (i < index) {
                bc += '<li><a href="#">' + $(x).text() + '</a></li>';
            }
        })

        bc += '<li>' + $(this).text() + '</li></ul>';
        $('#idSearch-item').html(bc).show();
    });

<li class="dropdown mega-dropdown open">
    <a href="#" class="dropdown-toggle breadcrumb-list" data-toggle="dropdown" aria-expanded="true">MEP SERVICES <span class="caret"></span></a>
    <ul class="dropdown-menu mega-dropdown-menu row">

        <li class="col-sm-3">
            <ul>
                <li class="dropdown-header breadcrumb-list" >Electrical<input type="hidden" value="28"></li>
                <li>
                    <a href="#" class="breadcrumb-list">Lighting</a>
                    <input type="hidden" value="29">
                </li>
                <li>
                    <a href="#" class="breadcrumb-list">HT &amp; LT</a>
                    <input type="hidden" value="30">
                </li>                   
            </ul>
        </li>
    </ul>
</li>

现在显示没有 Mep服务，

<div class="col-sm-12 col-md-12" style="" id="idSearch-item">
    <ul class="breadcrumb">
        <li><a href="#">Electrical</a></li>
        <li>
            <a href="#">
                Lighting

            </a>
        </li>
        <li>HT &amp; LT</li>
    </ul>
</div>

我该怎么做？请帮帮我......

Answer 1

使用此代码。希望它会有所帮助。只需查找最顶部锚标记的文本，并使用li标签进行装饰。

＆＃13;

＆＃13;

$(".breadcrumb-list").click(function () {
        
        var bc = '<ul class="breadcrumb">';
        var parentText = $('li.mega-dropdown').find("a:first()").text();
        bc += '<li><a href="#">' + parentText + '</a></li>'
        var index = $(this).parent().index();
        
        $(this).closest("ul").find("li").each(function (i, x) {
            if (i < index) {
                bc += '<li><a href="#">' + $(x).text() + '</a></li>';
            }
        })

        bc += '<li>' + $(this).text() + '</li></ul>';
        $('#idSearch-item').html(bc).show();
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown mega-dropdown open">
    <a href="#" class="dropdown-toggle breadcrumb-list" data-toggle="dropdown" aria-expanded="true">MEP SERVICES <span class="caret"></span></a>
    <ul class="dropdown-menu mega-dropdown-menu row">

        <li class="col-sm-3">
            <ul>
                <li class="dropdown-header breadcrumb-list" >Electrical<input type="hidden" value="28"></li>
                <li>
                    <a href="#" class="breadcrumb-list">Lighting</a>
                    <input type="hidden" value="29">
                </li>
                <li>
                    <a href="#" class="breadcrumb-list">HT &amp; LT</a>
                    <input type="hidden" value="30">
                </li>                   
            </ul>
        </li>
    </ul>
</li>

＆＃13;

＆＃13;

＆＃13;