错误的jQuery(这)导致jQuery().parents() foreach循环

Question

我有以下嵌套的<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>，直到到达根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.
        }

THE PROBLEM：蓝色背景被应用于使用*制作的部分，但我希望用#标记这些部分。

Answer 1

您的呼叫var parents = jQuery(a).parents("ul");应该是var parents = jQuery(a).closest("ul");

当您说var parents = jQuery(a).parents("ul");时，它获取所有ul元素，它们是目标a的祖先--在本例中有两个祖先ul元素，然后将css应用于每个ul元素中的第一个li。

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