Question

我尝试使用not()函数从选择器中排除子类，但它仍然选择子类。我知道我可以使用.parentClass > .childClass来选择我想要的所有子课程，但是我有很多子课程，只想排除一个子课程。

我在这里有一个简单的例子（p标签不应该有黄色背景颜色）：

HTML：

<li class='list'>
  <p class='pa'>test</p>
  <button class='btn'>click</button>
</li>
<li class='list'>
  <p class='pa'>test</p>
  <button class='btn'>click</button>
</li>

CSS：

.yellow {
  background-color : yellow;
}

JS：

$(document).ready(function(){
    $('.list:not(.pa)').addClass('yellow');
})

或者，您可以使用JSFIDDLE

Answer 1

它会过滤掉没有该类的.list元素，而不会过滤掉它的子元素。检查孩子使用jQuery :has()伪类选择器。

$(document).ready(function(){
    $('.list:not(:has(.pa))').addClass('yellow');
})

$(document).ready(function() {
  $('.list:not(:has(.pa))').addClass('yellow');
})

.yellow {
  color: yellow
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='list'>
    <p class='pa'>test</p>
    <button class='btn'>click</button>
  </li>
  <li class='list'>
    <p class='pa'>test</p>
    <button class='btn'>click</button>
  </li>
  <li class='list'>
    <p class=''>test</p>
    <button class='btn'>click</button>
  </li>
</ul>

Answer 2

您可以使用.filter过滤掉有孩子.pa的项目。

$(document).ready(function() {
  $('.list').filter(function(){
      return $('.pa',this).length == 0;
  }).addClass('yellow');
})

.yellow {
  color: yellow
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='list'>
    <p class='pa'>test</p>
    <button class='btn'>click</button>
  </li>
  <li class='list'>
    <p>test</p>
    <button class='btn'>click</button>
  </li>
</ul>

使用not（）排除子项，但不起作用

2 个答案: