定位li元素,除非前面有非li元素

时间:2016-04-05 16:54:52

标签: jquery html css

我如何定位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>  

1 个答案:

答案 0 :(得分: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>