jQuery addclass修改

时间:2017-04-20 10:24:39

标签: javascript jquery

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

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

3 个答案:

答案 0 :(得分:4)

使用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;

答案 1 :(得分:3)

使用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;

答案 2 :(得分:1)

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

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