Question

I'm looking for a way in jquery (or CSS3 ?!) to check all .vertical class element if there are another element with the same class .vertical just before OR after.

Please check, i would like to add a .solo class on the element mentionned :

<figure>
<figure class="vertical" ADD SOLO CLASS>
<p>
<figure>
<h1>
<p>
<figure class="vertical">
<figure class="vertical">
<figure>
<p>
<figure class="vertical">
<figure class="vertical">
<figure class="vertical">
<figure>
<figure class="vertical">
<figure class="vertical">
<figure>
<figure class="vertical" ADD SOLO CLASS>
<figure>
<figure>

Thanks a lot for your help.

Was it helpful?

Solution

One possible approach:

$('.vertical').filter(function() {
  var $this = $(this);
  if (!
    ( $this.next().is('.vertical') || $this.prev().is('.vertical') )
  ) {
    $this.addClass('solo');
  }
});

Demo. Note the change: I've closed all those <figure> elements (and some others, like <h1>) as, unlike <p>, they do require the closing tag.

OTHER TIPS

var not = $('.vertical + .vertical');
$('.vertical').not(not.add(not.prev())).addClass('solo');

FIDDLE

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top