jQuery：如果标记存在于self之上，则为标记添加样式

Question

I want to .addClass("someClass" to <blockquote> if it has a <figure> with class hello above it, like this:

<figure class="hello"> world </figure>
<blockquote> Lorem </blockquote>

So, only if the <figure> tag is right above it, not if something is separating the tags like a div.

Is such thing possible?

Answer 1

Assuming this is to style the <blockquote> element when it is immediately preceded by a <figure> , then you can simply use CSS:

figure + blockquote {
    border-color: red; /* or whatever */
}

 section { border: 1px solid #000; margin: 0 0 1em 0; } blockquote { border: 1px solid #000; } figure + blockquote { border-color: #f00; } 

 <section> <figure>This is a figure</figure> <blockquote>And this is an immediately-following blockquote.</blockquote> </section> <section> <blockquote>This is a blockquote.</blockquote> <figure>And this is a figure following a blockquote</figure> </section> <section> <figure>Another figure</figure> <div>a div</div> <blockquote>And this is a blockquote.</blockquote> </section> 

References:

• Adjacent-sibling ( + ) combinator .

Answer 2

$('figure.hello + blockquote').addClass('someClass');

From jQuery's docs:

Next Adjacent Selector (“prev + next”)

Selects all next elements matching "next" that are immediately preceded by a sibling "prev".

Answer 3

Can work from the known class ...is simplest

$('figure.hello').next('blockquote').addClass("someClass");

The way it works is if either selector isn't found, nothing happens and will only work for figure with folloing sibling being a blockuote