javascript - 在 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");

但当然，它们都为整个“Item 2”列表项(包括所有子项 2A、2B 和 2C)着色

Answer 1

您必须将每个父元素包装到某个 html 元素中，例如 div 或 span。

Solution

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");
        }          
    });