jQuery addclass修改

Question

我有一个问题如何仅在一，三和四上插入背景红色？

$(function() {
  $("#myid li").addClass("redcolor");
});

.redcolor {
  background-color: red
}

.abcsize {
  font-size: 36px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myid">
  <li>One</li>
  <li class="abcsize">
    Two
    <ul>
      <li>First</li>
      <li>Second</li>
    </ul>
  </li>
  <li>Three</li>
  <li>Four</li>
</ul>

Answer 1

使用not()功能获取除.abcsize及其子女之外的所有其他人

＆＃13;

＆＃13;

$(function(){
$("#myid li").not('.abcsize,.abcsize li').addClass("redcolor");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style> .redcolor {background-color:red}
.abcsize {font-size:36px}
</style>
<ul id="myid">
<li>One</li>
<li class="abcsize">
    Two
    <ul>
        <li>First</li>
        <li>Second</li>
    </ul>
</li>
<li>Three</li>
<li>Four</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用not选择器，将其设为

$("#myid > li:not(.abcsize)").addClass("redcolor");

同样使用>仅选择孩子

<强>演示

＆＃13;

＆＃13;

$(function() {
  $("#myid > li:not(.abcsize)").addClass("redcolor");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
  .redcolor {
    background-color: red
  }
  
  .abcsize {
    font-size: 36px
  }
</style>
<ul id="myid">
  <li>One</li>
  <li class="abcsize">
    Two
    <ul>
      <li>First</li>
      <li>Second</li>
    </ul>
  </li>
  <li>Three</li>
  <li>Four</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用not()功能。它用于选择所有没有.class，#id，tag作为not()函数的参数。

$(function(){
    $("#myid>li").not(".abcsize,.abcsize>ul>li").addClass("redcolor");
});