javascript - 使用 jquery 更改相应类的所有直接元素

Question

我的 html 内容

 <li class="info"> info<li>
 <li class="other"> info<li>
 <li class="other"> info<li>

 <li class="Error"> error<li>
 <li class="other"> error<li>
 <li class="warning"> warning<li>
 <li class="other"> warning<li>
 <li class="other"> warning<li>
 <li class="info"> info<li>
 <li class="other"> info<li>
 <li class="other"> info<li>

基于li元素类，我只想过滤直接的li.other类项css使用jquery改变；

我遵循以下方法:当我选择信息元素时:

  $('.info').prevAll('li.other').css({});

它起作用了，但它会改变所有以前的 li.other 元素。相反，我只想特定于那个特定的 html(info) 元素 li.other 元素。其余的都被忽略了。 请任何人提供可能的方法

Answer 1

您需要使用 prevUntil()使用 :not() pseudo-class selector 的方法实现结果。

$('.info').prevUntil(':not(li.other)').css({});

$('.info').prevUntil(':not(li.other)').css({
  color: 'red'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="info"> info</li>
  <li class="other"> info</li>
  <li class="other"> info</li>
  <li class="Error"> error</li>
  <li class="other"> error</li>
  <li class="warning"> warning</li>
  <li class="other"> warning</li>
  <li class="other"> warning</li>
  <li class="info"> info</li>
  <li class="other"> info</li>
  <li class="other"> info</li>
</ul>

---

如果您需要三个 warning，那么您需要获取最后一个元素并使用 addBack() 将其添加到选择器中方法。

$('.info').prevUntil(':not(li.other)').prev().addBack().css({});

$('.info').prevUntil(':not(li.other)').prev().addBack().css({
  color: 'red'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="info"> info</li>
  <li class="other"> info</li>
  <li class="other"> info</li>
  <li class="Error"> error</li>
  <li class="other"> error</li>
  <li class="warning"> warning</li>
  <li class="other"> warning</li>
  <li class="other"> warning</li>
  <li class="info"> info</li>
  <li class="other"> info</li>
  <li class="other"> info</li>
</ul>