0

我有以下嵌套<ul> <li>菜单结构：

<ul class="tree-0">
* #<li> 
      <a> Root Category </a>
      <ul class="tree-1">
*        <li>
             <a href="/Home/Products/1">Category 1</a>
             <ul class="tree-2">
*              <li><a href="/Home/Products/11">SubCategory 1.1</a></li>
*              <li><a href="/Home/Products/12">SubCategory 1.2</a></li>
             </ul>
         </li>
  #      <li>
             <a href="/Home/Products/2">Category 2</a>
             <ul class="tree-2">
* #            <li><a href="/Home/Products/21">Category 2.1</a></li>
               <li><a href="/Home/Products/22">Category 2.2</a></li>
             </ul>
         </li>
      </ul>
   </li>
</ul>

我想选择所有类别的 2.1 类型的父母<ul>，直到达到 root ul。所以我的代码如下： URL: localhost:22342/Home/Products/21

//Get the `<a>` tag which has the href equal to the pathname
var a = jQuery("a[href='" + window.location.pathname + "']"); //Suppose its Category 2.2

//Get ul parents of <a>  
var parents = jQuery(a).parents("ul");

//Loop through the parents array()
for (var i = 0; i < parents.length; i++) {
            console.log(jQuery(parents[i]).attr("level")); // check if looping occurs till root
            jQuery(parents[i]).find("li:first").css("background","blue"); // apply a class to first child of the parent element.
        }

问题：蓝色背景应用于用 * 制作的部分，但我希望用 # 标记部分。

4

1 回答 1

2

你的电话var parents = jQuery(a).parents("ul");应该是var parents = jQuery(a).closest("ul");

当您说它var parents = jQuery(a).parents("ul");获取所有ul作为目标祖先的元素时，a在这种情况下有两个祖先ul元素，然后它将css应用于li每个元素中的第一个ul元素

如果您使用.closest()它将仅返回与选择器匹配的第一个元素

于 2013-08-02T09:36:07.897 回答