CSS/JSで特定の要素の後に来るターゲット要素

Question

Javascript/jQueryまたはCSSセレクタを使用して、特定の要素の後に来る要素をどのようにターゲットにしますか？明らかにするために、私は直後（隣接）を意味するわけではなく、ページの下にさらに存在する一致する要素を意味します。 「私はp#special後に来る<p>秒のすべてをターゲットにしたい今

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

...ので、内容を持つものは、「悲しみ」、「座る」、および：

<p>秒のグループを想像してみてアメット "。

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

どうすればいいですか？

Answer 1

nextAll()は、探しているjQuery関数です。

このドキュメントを参照してください：（）https://api.jquery.com/nextUntil/（マイトより有用）

$（ "nextuntil https://api.jquery.com/nextAll/

Answer 2

jQueryの

次の（）https://api.jquery.com/next/

nextall（）https://api.jquery.com/nextAll/

p＃special "）.next（）。css（"背景色 "、"赤 "）;

Answer 3

あなたはCSS

〜コンビネータは、2つのセレクタを分離し、それが最初に先行されている場合にのみ、二 要素と一致してgeneral siblingセレクタを使用して、両方の共通 の親を共有することができます。 jQueryので

#special ~ p {color: red}

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

それは、すべての要素が同じ親である場合は、あなただけのGeneral Sibling Combinator ~を使用することができます"Next Siblings Selector "

$('#special ~ p') 

Answer 4

と呼ばれています：

#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>

Answer 5

CSS ~セレクタを使用できます。あなたのケースでは

：。

p#special ~ p