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>

can you show a before & after (required modified html...)? It doens't look like your code is correct, for example, $(this) is probably not what you meant to do... — Amit
– Amit, Commented Jun 8, 2015 at 6:06
Just to confirm, you mention that the angle should only be added to a div if it has a background-image on the previous div and a background-color on the next but your code appears to be checking if the previous div has a background-color. Which set of rules do you want to follow? — Hidden Hobbes
– Hidden Hobbes, Commented Jun 8, 2015 at 7:48
Sorry, I misspoke, what I wanted is to loop through the divs and if the current div in loop has a background color of green in rgb, or a background image, then the classes will be added. — Grant Warren
– Grant Warren, Commented Jun 11, 2015 at 21:48

Joel Almeida · Accepted Answer · 2015-06-08 08:02:55Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related