how to getting parents value

Question

As you see I have more than one .box div and my .box div has data-item-color attribute I need to get data-item-color value to change my .box css properties (.line,.tinyline,h6,p), shortly:

if my data-item-color has red value than make my .line,h6,p to red which is inside of .box div

and demo link

$(document).ready(function() {

});

h6,
p,
span {
  padding: 0;
  margin: 0;
}

.box {
  width: 200px;
  padding: 20px;
  float: left;
  margin: 10px;
}

.line:before {
  content: "";
  width: 100%;
  height: 5px;
  background: #000;
  display: block;
}

.tinyline:after {
  content: "";
  width: 100%;
  height: 2px;
  background: #000;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-item-color="red">
  <span class="line"></span>
  <h6>RED</h6>
  <p>red text...
    <span class="tinyline"></span>
  </p>
</div>

<div class="box" data-item-color="blue">
  <span class="line"></span>
  <h6>BLUE</h6>
  <p>Blue text..
    <span class="tinyline"></span>
  </p>
</div>

Hemal · Answer 1 · 2017-02-17T14:04:07.867

Have a look at this.

I traversed through each div and applied its color to its child.

$(document).ready(function() {
  $("div.box").each(function(){
    $(this).find("*").css("color",$(this).data("item-color"));
    $(this).find(".line,.tinyline").css("background-color",$(this).data("item-color"));
  });
});

h6,
p,
span {
  padding: 0;
  margin: 0;
}

.box {
  width: 200px;
  padding: 20px;
  float: left;
  margin: 10px;
}

.line {
  content: "";
  width: 100%;
  height: 5px;
  background: #000;
  display: block;
}

.tinyline {
  content: "";
  width: 100%;
  height: 2px;
  background: #000;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-item-color="red">
  <span class="line"></span>
  <h6>RED</h6>
  <p>red text...
    <span class="tinyline"></span>
  </p>
</div>

<div class="box" data-item-color="blue">
  <span class="line"></span>
  <h6>BLUE</h6>
  <p>Blue text..
    <span class="tinyline"></span>
  </p>
</div>

it's great I have another question how can I change my psuedo properties how they will change ? — ani_css, Feb 17 '17 at 13:23
You have to remove `:after` and `:before` from css for that. — Hemal, Feb 17 '17 at 14:04

therealbischero · Accepted Answer · 2017-02-18T08:27:22.483

Try this (I also edited your css):

<div class="box" data-item-color="red">
  <span class="line"></span>
  <h6>RED</h6>
  <p>red text...
    <span class="tinyline"></span>
  </p>
</div>

<div class="box" data-item-color="blue">
  <span class="line"></span>
  <h6>BLUE</h6>
  <p>Blue text..
    <span class="tinyline"></span>
  </p>
</div>

$(document).ready(function() {
  $('.box').each(function() {
    var color = $(this).attr('data-item-color');
    $(this).children('.line').addClass(color);
    $(this).children('h6').css('color', color);
    $(this).children('p').css('color', color);
    $(this).find('.tinyline').addClass(color);
  });
});

h6,
p,
span {
  padding: 0;
  margin: 0;
}

.box {
  width: 200px;
  padding: 20px;
  float: left;
  margin: 10px;
}

.line:before {
  content: "";
  width: 100%;
  height: 5px;
  background: #000;
  display: block;
}

.line.red:before {
  background: red;
}

.line.blue:before {
  background: blue;
}

.tinyline:after {
  content: "";
  width: 100%;
  height: 2px;
  background: #000;
  display: block;
}

.tinyline.red:after {
  background: red;
}

.tinyline.blue:after {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-item-color="red">
  <span class="line"></span>
  <h6>RED</h6>
  <p>red text...
    <span class="tinyline"></span>
  </p>
</div>

<div class="box" data-item-color="blue">
  <span class="line"></span>
  <h6>BLUE</h6>
  <p>Blue text..
    <span class="tinyline"></span>
  </p>
</div>

EDIT
I saw your comment so I edited the code. If you really need pseudo element You can create a class for each color You are going to use. Then in jquery You will overwrite the line:before and tinyline:after style you wrote before by adding the relative class to the element.

hi thanks for sharing I wonder something why not .line or .tinyline doesn't change could it be because of psuedo? — ani_css, Feb 17 '17 at 13:26
@recruit_man pseudo elements can't be manipulated directly by javascript. Looking at your css i saw that the pseudo elements were not needed so i removed them — therealbischero, Feb 17 '17 at 13:33
buy in my project I have to reach them because I'm using flaticon and font is chancing only just before psuedo of flaticon font — ani_css, Feb 17 '17 at 13:35

Nikola Lukic · Answer 3 · 2018-05-21T07:42:07.800

Tell me is it ok this answer?

$(document).ready(function() {

window["GETATRR"] = document.getElementsByClassName("box");

 for (var x=0;x < GETATRR.length ;x++) {
    if ( typeof GETATRR[x].getAttribute("data-item-color") != 'undefined'  ) {
     console.log("I AM : " + GETATRR[x].getAttribute("data-item-color"))
    // CHANGE HERE WHAT EVER YOU WANT 
    GETATRR[x].style.color = GETATRR[x].getAttribute("data-item-color")
    }
 } 
});

h6,
p,
span {
  padding: 0;
  margin: 0;
}

.box {
  width: 200px;
  padding: 20px;
  float: left;
  margin: 10px;
}

.line:before {
  content: "";
  width: 100%;
  height: 5px;
  background: #000;
  display: block;
}

.tinyline:after {
  content: "";
  width: 100%;
  height: 2px;
  background: #000;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-item-color="red">
  <span class="line"></span>
  <h6>RED</h6>
  <p>red text...
    <span class="tinyline"></span>
  </p>
</div>

<div class="box" data-item-color="blue">
  <span class="line"></span>
  <h6>BLUE</h6>
  <p>Blue text..
    <span class="tinyline"></span>
  </p>
</div>

yes it's a good example thanks for it but there is anything else that I wonder now how to change properties of psuedo(before,after) with jquery ? :) — ani_css, Feb 17 '17 at 13:30
Add red , blue ... class , than use find child elements of current .box(tag element) , easy with JQ remove and add new class , red for red etc... Just follow stackoverflow Q/A your solution is already there. — Nikola Lukic, Feb 18 '17 at 17:01

how to getting parents value

3 Answers3