在jQuery的嵌套列表中选择没有子项的父项列表项

Question

我有这个嵌套列表：

<ul>
  <li>Item 1
    <ul>
      <li>Item 1A</li>
      <li>Item 1B</li>
      <li>Item 1C</li>
    </ul>
  </li>
  <li>Item 2
    <ul>
      <li>Item 2A</li>
      <li class="active">Item 2B</li>
      <li>Item 2C</li>
    </ul>
  </li>
  <li>Item 3
    <ul>
      <li>Item 3A</li>
      <li>Item 3B</li>
      <li>Item 3C</li>
    </ul>
  </li>
</ul>

我需要的是：当我将鼠标悬停在具有class="active"的列表项上时，此特定项'Item 2B'及其父项'Item 2'将被涂成红色。 “项目2A”和“项目2C” 不应该是彩色的。

我尝试过closest() ：

$("li").on("mouseenter", function () {
    if ($(this).hasClass("active")) {
        $(this).css("color", "red");
        $(this).closest("ul").closest("li").css("color", "red");
    }
});

也是parent().parent() ：

$(this).parent().parent().css("color", "red");

但是他们当然都为整个“第2项”列表项着色，包括所有子项2A，2B和2C

Answer 1

您必须将每个父元素包装到div或span之类的html元素中。

解

HTML

 <ul>
              <li>Item 1
                  <ul>
                  <li>Item 1A</li>
                  <li>Item 1B</li>
                  <li>Item 1C</li>
                  </ul>
              </li>
              <li><span>Item 2</span>  
                  <ul>
                      <li>Item 2A</li>
                      <li class="active">Item 2B</li>
                      <li>Item 2C</li>
                  </ul>
              </li>
              <li>Item 3
                  <ul>
                  <li>Item 3A</li>
                  <li>Item 3B</li>
                  <li>Item 3C</li>
                  </ul>              
              </li>
    </ul>

JS

$("li").on("mouseenter", function () {

        if ($(this).hasClass("active")) {

            $(this).css("color", "red");
            $(this).parent().parent().find("span").css("color", "red");
        }          
    }); 

Answer 2

为此，您需要将Item 2文本包装在一个包含元素（例如span ，否则所有子元素的颜色也会更改。

然后，您可以使用.parent.closest('li')来获取li ，然后再使用children()来获取该span 。 尝试这个：

 $("ul").on("mouseenter mouseleave", 'li.active', function(e) { var $target = $(this).parent().closest('li').children('span'); $target.add(this).toggleClass('hover', e.type == 'mouseenter'); }); 

 .active { font-weight: bold; } .hover { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li> <span>Item 1</span> <ul> <li>Item 1A</li> <li>Item 1B</li> <li>Item 1C</li> </ul> </li> <li> <span>Item 2</span> <ul> <li>Item 2A</li> <li class="active">Item 2B</li> <li>Item 2C</li> </ul> </li> <li> <span>Item 3</span> <ul> <li>Item 3A</li> <li>Item 3B</li> <li>Item 3C</li> </ul> </li> </ul> 

请注意，在调用closest()之前需要parent()调用，因为closest()将与当前的li元素匹配，这是我们不希望的，因此需要parent()来“跳越”该元素。

Answer 3

我可能会这样做：

• 对li本身使用标准:hover规则
• 为父级li使用类而不是直接样式
• 使用CSS中的class重新声明li下的ul元素（及其子元素）的颜色

像这样：

 $("li") .on("mouseenter", function() { if ($(this).hasClass("active")) { $(this).parent().closest("li").addClass("has-active"); } }) .on("mouseleave", function() { if ($(this).hasClass("active")) { $(this).parent().closest("li").removeClass("has-active"); } }); 

 li { color: black; } li.has-active { color: red; } li.active:hover { color: red; } .has-active ul { color: black; } 

 <ul> <li>Item 1 <ul> <li>Item 1A</li> <li>Item 1B</li> <li>Item 1C</li> </ul> </li> <li>Item 2 <ul> <li>Item 2A</li> <li class="active">Item 2B</li> <li>Item 2C</li> </ul> </li> <li>Item 3 <ul> <li>Item 3A</li> <li>Item 3B</li> <li>Item 3C</li> </ul> </li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>