javascript - 使用查询从 li 元素获取 Html.ActionLink 参数

Question

我有这个无序列表:

     <ul class="list"> 
         <li class="navItem">@Html.ActionLink("Home", "Index", "Home")</li>
         <li class="navItem">@Html.ActionLink("Contact", "ContactForm", "Contact")</li>
     </ul>

在我的脚本中，我想通过操作和 Controller 名称来选择 li 元素，这样我就可以从特定的 li 元素中检索宽度和位置等数据。

我的函数看起来像这样，但我不知道选择器必须是什么样子。

    function currentItem() {

     //Here i get the current view and controller name
     var actionName = '@ViewContext.RouteData.Values["Action"].ToString()';
     var controllerName = '@ViewContext.RouteData.Values["Controller"].ToString()';
     // something like that, putting the link together?
     var $currentItem = $('a[href="' + viewController + controllerName + '"]'); 

     // or find all elements by class name an than do something like
     var myArray = $('.navItem');

     if (myArray[0].Controller == controllerName ||myArray[0].Action == actionName)  {
     $currentItem = myArray[0];
     }

      return $currentItem;
      }

感谢您的帮助。

弗兰胡

Answer 1

首先让我们考虑一下我们将使用什么 HTML。 Html.ActionLink 将转换为 a 标记，因此您的 HTML 将如下所示:

<li class="navItem"><a href="/Home/Index">Home</a></li>

考虑到这一点，我们可以迭代 li 元素，检查其内部 a 元素并匹配 href 属性。

所以像这样的东西应该有效:

function currentItem() {
    var actionName = '@ViewContext.RouteData.Values["Action"].ToString()';
    var controllerName = '@ViewContext.RouteData.Values["Controller"].ToString()';

    var listItems = $('.navItem');

    for(var i = 0; i < listItems.length; i++){
        var item = $(listItems[i]);
        var a = item.find("a");
        if(a.attr["href"].indexOf(controllerName + "/" + actionName) != -1){
            return item;
        }
    }
}

请注意，这将返回匹配的 li 元素。如果您想要匹配的 a 元素，请改用 return a; 。