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> 

Answer 1

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> 

Answer 2

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.

Answer 3

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>