Question

我有这个无序列表：

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

在我的脚本中我想通过他的动作和控制器名称选择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;
      }

感谢您的帮助。

Franhu

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;。

从li元素获取带有查询的Html.ActionLink参数

1 个答案: