Question

我正在尝试删除最后一个列表项的类。但是jQuery只会在2次点击后删除两个列表项的类。

我在这里做错了什么？为什么jQuery不会只删除最后一个类？如果只有一个包含此类的列表项，则只需删除此类。

＆＃13;

$( "#test" ).click(function() {
  $("ul li.visible").last().removeClass( "visible" );
});

＆＃13;

a {
  color:blue;
}
.visible {
  color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="test">Click me -> Remove last</a>
<ul>
  <li>Bla
    <ul>
      <li class="visible">Foo
        <ul>
          <li class="visible"> Bar</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 1

是从拥有它的最后一个元素中删除该类。但是该元素是内部另一个也具有该类的元素，因此它继承了样式（color: red）。如果您执行border：

之类的操作，这一点就很明显了

＆＃13;

$( "#test" ).click(function() {
  $("ul li.visible").last().removeClass( "visible" );
});

＆＃13;

a {
  color:blue;
}
.visible {
  color:red;
  border: 1px solid blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="test">Click me -> Remove last</a>
<ul>
  <li>Bla
    <ul>
      <li class="visible">Foo
        <ul>
          <li class="visible"> Bar</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

如果您不希望后代元素继承样式，则必须修改CSS。例如，您可以使用ul设置color: black个元素：

＆＃13;

$( "#test" ).click(function() {
  $("ul li.visible").last().removeClass( "visible" );
});

＆＃13;

a {
  color:blue;
}
ul {
  color: black;
}
.visible {
  color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="test">Click me -> Remove last</a>
<ul>
  <li>Bla
    <ul>
      <li class="visible">Foo
        <ul>
          <li class="visible"> Bar</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

您的代码是正确的。通过更改嵌套元素颜色进行检查。问题是嵌套子项默认继承父样式。虽然删除了类活动，但最后一个元素仍然是红色，因为它是活动

的其他元素的一部分

$( "#test" ).click(function() {
  $("ul li.visible").last().removeClass( "visible" );
});

a {
  color:blue;
}
.visible {
  color:red;
}
.visible .visible{
  color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="test">Click me -> Remove last</a>
<ul>
  <li>Bla
    <ul>
      <li class="visible">Foo
        <ul>
          <li class="visible"> Bar</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

删除元素中的最后一个元素的类

2 个答案: