jQuery addclass modification

Question

I have a question How to insert background red color only on One, Three, and Four?

$(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

Use not() function to get all li's except for the .abcsize and his children

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

<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>

Answer 2

Use not selector, make it

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

Also use > for only selecting the children

Demo

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

<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>

Answer 3

Use not() function. Its used to select all without .class, #id, tag given as parameter on not() function.

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