Using .css("background-color") for comparison jQuery/Js

Question

I am working on a project to make angled divs where the break between each basic panel on a page is an angle if the div has a background-image on the previous div, and a background-color of green on the next div.

I know I can't select pseudo classes directly so I decided to use the .addClass() to show and hide the angle.

The problem is my comparisons either turn all divs green, or adds angles to all the divs. I think most of my problem is in my approach, but I'm not sure where I am going wrong. Here is the JS and the jQuery so far, I'm just trying to make the comparison work so it is still rough:

$(function() {
     green = $('div').css("background-color", "rgb(0,255,0)");
          if ($('.box').prev() === green) 
        {
          $(this).addClass('withTop withoutTop');
          //if ($(this).css("background-color") == green) 
        }
    });

I have used regex to strip all but digits from the rgb but it seems to have the same effect. Thanks in advance and here is the link to the codepen. http://codepen.io/AnomalousDevs/pen/GJmrrw

CSS and markup

$(function() {
  green = $('div').css("background-color", "rgb(0,255,0)");
  if ($('.box').prev() === green) {
    $(this).addClass('withTop withoutTop');
    //if ($(this).css("background-color") == green) 
  }
});

.box {

  height: 100px;

  width: 100%;

  /*background-color: rgb(0,255,0);*/

  position: relative;

}

.box:nth-of-type(5) {

  background-color: green;

  /* background-image:url("http://www.google.com/imgres?imgurl=http://dreamatico.com/data_images/guitar/guitar-6.jpg&imgrefurl=http://dreamatico.com/guitar.html&h=851&w=1280&tbnid=DVUGPDoyiOu4sM:&zoom=1&docid=OlLKDKDUUigDoM&hl=en&ei=iqJzVcaEOcvAtQXW-oO4Cw&tbm=isch&ved=0CDwQMygKMAo");*/

}

.box:nth-of-type(4) {

  background: red;

  position: relative;

}

.box:nth-of-type(3) {

  background: blue;

}

.box:nth-of-type(2) {

  background: rgb(0, 255, 0);

}

.box:nth-of-type(1) {

  background: lightblue;

}

.withTop::before {

  content: '';

  position: absolute;

  background: black;

  width: 100%;

  /*top:-16px;*/

  height: 30px;

  left: 0;

  transform: skewY(-1.3Deg);

  z-index: 1;

}

.withoutTop::after {

  content: '';

  position: absolute;

  background: black;

  width: 100%;

  height: 30px;

  left: 0;

  transform: skewY(2Deg);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="parent">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box withTop"></div>

</section>

Answer 1

Your question is not clear but I think that what you are trying to achieve is adding a class to the .box after the green one.

Suggestion of base logic you should do:

$(function() {
  var boxes = $('.box'),
    greenBox = '';
  //for each box
  boxes.each(function(index) {
    //if this box is the green one
    if ($(this).css("background-color") === "rgb(0, 255, 0)") {
      greenBox = $(this);
      //addClass to the next one
      $(this).next().addClass('withTop');
    }
  });
});

.box {
  height: 100px;
  width: 100%;
  /*background-color: rgb(0,255,0);*/
  position: relative;
}
.box:nth-of-type(5) {
  background-color: green;
  /* background-image:url("http://www.google.com/imgres?imgurl=http://dreamatico.com/data_images/guitar/guitar-6.jpg&imgrefurl=http://dreamatico.com/guitar.html&h=851&w=1280&tbnid=DVUGPDoyiOu4sM:&zoom=1&docid=OlLKDKDUUigDoM&hl=en&ei=iqJzVcaEOcvAtQXW-oO4Cw&tbm=isch&ved=0CDwQMygKMAo");*/
}
.box:nth-of-type(4) {
  background: red;
  position: relative;
}
.box:nth-of-type(3) {
  background: blue;
}
.box:nth-of-type(2) {
  background: rgb(0, 255, 0);
}
.box:nth-of-type(1) {
  background: lightblue;
}
.withTop::before {
  content: '';
  position: absolute;
  background: black;
  width: 100%;
  /*top:-16px;*/
  height: 30px;
  left: 0;
  transform: skewY(-1.3Deg);
  z-index: 1;
}
.withoutTop::after {
  content: '';
  position: absolute;
  background: black;
  width: 100%;
  height: 30px;
  left: 0;
  transform: skewY(2Deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="parent">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box withTop"></div>
</section>