jquery - 定位 li 元素，除非前面有非 li 元素

Question

我如何定位 li 元素，除非它们出现在 <p class="Notes> 之后元素？换句话说，我想针对步骤而不是注释。

我尝试向 OL 添加一个我想从选择中排除的类，但我想出的代码不起作用。

(顺便说一句，重构 html 不是一种选择)

('#a > ol > li.P-List-number').not(':has("ul.Notes")')


<div id="a">
<h2 class="task">Blah, blah, blah</h2>
    <p class="Body">Yada, yada, yada:</p>
        <ol>
          <li class="P-List-number">Step 1...</li>
          <li class="P-List-number">Step 2...</li>
          <li class="P-List-number">Step 3...</li>
       </ol>
       <p class="Notes>NOTES</p>
       <ol class="Notes">
          <li class="P-List-number">Note 1</li>
          <li class="P-List-number">Note 2</li>
       </ol>
</div>  

Answer 1

您可以使用 p:not(.Notes) 然后选择 ol 与 next() 和 li 与 children( )

$('p:not(.Notes)').next('ol').children('li').css('color', 'blue');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">
  <h2 class="task">Blah, blah, blah</h2>
  <p class="Body">Yada, yada, yada:</p>
  <ol>
    <li class="P-List-number">Step 1...</li>
    <li class="P-List-number">Step 2...</li>
    <li class="P-List-number">Step 3...</li>
  </ol>
  <p class="Notes">NOTES</p>
  <ol class="Notes">
    <li class="P-List-number">Note 1</li>
    <li class="P-List-number">Note 2</li>
  </ol>
</div>

或者只是p:not(.Notes) + ol li

$('p:not(.Notes) + ol li').css('color', 'blue');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">
  <h2 class="task">Blah, blah, blah</h2>
  <p class="Body">Yada, yada, yada:</p>
  <ol>
    <li class="P-List-number">Step 1...</li>
    <li class="P-List-number">Step 2...</li>
    <li class="P-List-number">Step 3...</li>
  </ol>
  <p class="Notes">NOTES</p>
  <ol class="Notes">
    <li class="P-List-number">Note 1</li>
    <li class="P-List-number">Note 2</li>
  </ol>
</div>