Question

这是我的菜单列表HTML：

<div id="sidebar-left">
                <ul class="nav main-menu">
                    <li class="dropdown ng-scope" ng-repeat="parent in menu" name="Home">
                        <a href="/employee/Home" class="dropdown-toggle">
                            <span class="hidden-xs ng-binding">Home</span>
                        </a>                       
                    </li>
                    <li class="dropdown ng-scope" ng-repeat="parent in menu" name="Documents">
                        <a href="/documents/doc_details" class="dropdown-toggle">
                            <span class="hidden-xs ng-binding">Documents</span>
                        </a>                       
                    </li>
                    <li class="dropdown ng-scope" ng-repeat="parent in menu" name="Pay">
                        <a href="#" class="dropdown-toggle">
                            <span class="hidden-xs ng-binding">Pay &amp; Benifits</span>
                        </a>
                        <ul class="dropdown-menu">
                           <li ng-repeat="child in parent.children" class="ng-scope" name="Slips">
                                <a href="/pay/paymanagement">slips</a>
                            </li>
                        </ul>
                    </li>                    
                </ul>
            </div>

每当我点击菜单页面时，都会重新加载并导航到点击href。当页面刷新时，菜单将再次加载。

我尝试使用当前name attribute value点击菜单url。所以我写了这段代码

//pageUrl=location.pathname;
pageUrl="/pay/paymanagement"
$('#sidebar-left .nav li:has(a[href="' + pageUrl + '"])').attr('name');

我在这里对pageUrl进行了硬编码。
现在我的问题是，每当我点击/pay/paymanagement菜单时，我应该得到名称属性值Slips吗？ Pay在这里。（即）它返回其父li name attribute value。

我也试过这些方法..

$('#sidebar-left .nav li:has(a[href="' + pageUrl + '"])').closest('li').attr('name');

$('#sidebar-left .nav li:has(a[href="' + pageUrl + '"])').parent('li').attr('name');

所有内容仅返回Slips。

如何仅使用li name attribute value获取当前url。有什么建议吗？

Note:我只能使用网址查找点击的元素。我无法在此处使用任何点击事件。

Answer 1

试试这个：

$('#sidebar-left .nav li > a[href="' + pageUrl + '"]').parent().attr('name');

下降到孩子，然后踩到更好的工作

Answer 2

在这里，您将获得2个li元素，因此您需要选择最后一个元素以获取正确的数据：

解决方案1：

$(($('#sidebar-left .nav li:has(a[href="/pay/paymanagement"])')[1])).attr('name')

解决方案2：

$('#sidebar-left .nav li:has(a[href="/pay/paymanagement"])').last().attr('name')

JsFidder链接：https://jsfiddle.net/m8z06nzc/1/

Answer 3

试试这个，移除has，然后获取closest

检查此https://jsfiddle.net/nruzrx85/1/

$('#sidebar-left .nav li a[href="' + pageUrl + '"]').closest('li').attr('name');

Answer 4

您可以使用查询字符串在URL中发送name属性的值。然后，您可以使用以下函数获取该查询字符串的值。

function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));

}

这里我附上了更新的HTML代码。

    <div id="sidebar-left">
                <ul class="nav main-menu">
                    <li class="dropdown ng-scope" ng-repeat="parent in menu" name="Home">
                        <a href="/employee/Home" class="dropdown-toggle">
                            <span class="hidden-xs ng-binding">Home</span>
                        </a>                       
                    </li>
                    <li class="dropdown ng-scope" ng-repeat="parent in menu" name="Documents">
                        <a href="/documents/doc_details" class="dropdown-toggle">
                            <span class="hidden-xs ng-binding">Documents</span>
                        </a>                       
                    </li>
                    <li class="dropdown ng-scope" ng-repeat="parent in menu" name="Pay">
                        <a href="#" class="dropdown-toggle">
                            <span class="hidden-xs ng-binding">Pay &amp; Benifits</span>
                        </a>
                        <ul class="dropdown-menu">
                           <li ng-repeat="child in parent.children" class="ng-scope" name="Slips">
                                <a href="/pay/paymanagement?name=slips">slips</a>
                            </li>
                        </ul>
                    </li>                    
                </ul>
</div>

如何获取单击列表属性值

4 个答案: