JQuery: add styling for tag if exists above itself
I want .addClass("someClass"
before <blockquote>
if it has <figure>
with a class hello
above it, for example:
<figure class="hello"> world </figure>
<blockquote> Lorem </blockquote>
So, only if the tag <figure>
is right above it, not if something is separating tags like div.
Is it possible?
Assuming this is the style of the element <blockquote>
when immediately preceded <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>
Literature:
- combinator of adjacent (
+
) .
$('figure.hello + blockquote').addClass('someClass');
From the jQuery docs:
Next adjacent selector ("prev + next")
Selects all next elements matching "next" that immediately preceded the sibling "prev".
Can work from a known class ... the simplest
$('figure.hello').next('blockquote').addClass("someClass");
How does it work, if any selector is not found, nothing happens and will only work for a figure with the next sibling being a block comment