在CSS/JS中指定元素之后的目标元素

Target elements that come after a specific element with CSS/JS

本文关键字：元素 之后 目标 CSS JS      更新时间：2023-09-26

使用Javascript/jQuery或CSS选择器，我如何定位特定元素之后的元素?需要说明的是，我指的不是直接在(相邻)之后，而是在页面下方存在的任何和所有匹配元素。

想象一组<p> s:

<p>Lorem</p>
<p id="special">Ipsum</p>
<p>Dolor</p>
<p>Sit</p>
<p>Amet</p>

现在我想针对p#special之后的所有<p>…内容是"Dolor"， "Sit"answers"Amet"的。我希望有一些选择器可用，比如:

$('p#special::allAfter p').each(...

我该怎么做呢?

你可以在CSS中使用通用兄弟选择器

~组合符分隔两个选择器并匹配第二个元素，且两者具有相同的父母。

#special ~ p {color: red}
<p>Lorem</p>
<p id="special">Ipsum</p>
<p>Dolor</p>
<p>Sit</p>
<p>Amet</p>

在jQuery中它被称为"Next Siblings Selector "

$('#special ~ p')

nextAll()是您正在寻找的jQuery函数。

请参阅此文档:https://api.jquery.com/nextAll/

jQuery

next () https://api.jquery.com/next/

nextall () https://api.jquery.com/nextAll/

nextuntil() https://api.jquery.com/nextUntil/(可能更有用)

$ (" p #特别"). next () . css("背景颜色","红");

您可以使用CSS ~选择器。

在你的例子中:

p#special ~ p

如果所有元素都在同一个父元素中，您可以使用General Sibling Combinator ~:

#special ~ p {
  color: red;
}
<p>Lorem</p>
<p id="special">Ipsum</p>
<p>Dolor</p>
<p>Sit</p>
<p>Amet</p>

但是，<p>必须是的兄弟。

否则，如果你想选择页面下面的每个p，不管它是否是兄弟，你都必须使用JS:

var para = document.querySelectorAll("p"), //Get p's
  addColor = false;
Array.prototype.forEach.call(para, function(p) {
  //Loop through paragraphs
  //If addColor is true, add color to paragraph
  if (addColor) p.style.color = "red";
  //If the current paragraphs id is special, set addColor to true
  if (p.id == "special") addColor = true;
});
<div>
  <p>Test</p>
  <p>Test</p>
  <p id="special">Test</p>
</div>
<p>Test</p>
<p>Test</p>
<div>
  <div>
    <p>Test</p>
  </div>
</div>

或者在jQuery中:

var para = $("p"),
  addColor = false;
para.each(function() {
  if (addColor) this.style.color = "red";
  if (this.id === "special") addColor = true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <p>Test</p>
  <p>Test</p>
  <p id="special">Test</p>
</div>
<p>Test</p>
<p>Test</p>
<div>
  <div>
    <p>Test</p>
  </div>
</div>

相关文章：