Question

Hi this is the code that is being generated automatically:

<div class="divider"></div>
<article class="link"></article>
<div class="divider"></div>
<article></article>
<div class="divider"></div>
<article></article>
<div class="divider"></div>

Now I don’t like to see the first divider so $("divider").first().css("display", "none"); works fine.

However any article with the class “link” has to be hidden $("link").first().css("display", "none");

This leaves the second divider playing the role of the first divider, So I need to hide that also. I can’t say hide the second divider are that is not always the case. It could even be

<div class="divider"></div>
<article class="link"></article>
<div class="divider"></div>
<article class="link"></article>
<div class="divider"></div>
<article class="link"></article>

In this case I would need to hide all the dividers.

I need something link if an article does not exist before the .divider then hide it

Any help? thanks

Answer 1

I’d firstly hide all the .links, with

$('article.link').hide()

and then hide all the .dividers that precede the .article (in this way you won’t see two .dividers one after the other) with

.prev('.divider').hide();

Finally I’d hide the first .divider with

$('.whatever-container-you-have > .divider:first-child').hide();

Wrapped all together it becomes:

$('article.link').hide().prev('.divider').hide();
$('.whatever-container-you-have > .divider:first-child').hide();

that should fit what you need.