том, как получать родители ценят

Question

Как вы видите, у меня есть более чем один .box DIV и мой .box DIV имеет data-item-color атрибут Мне нужно, чтобы получить data-item-color значение, чтобы изменить мои .box свойства CSS (.Строка, .tinyline, h6, р), в ближайшее время :

если мой data-item-color имеет red значение, чем сделать мой .line, h6, p на красный, который находится внутри .box DIV

и 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

Попробуйте это (я редактировал свой 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
Я видел ваш комментарий, поэтому редактировал код. Если вам действительно нужен псевдоэлемент, вы можете создать класс для каждого цвета, который вы собираетесь использовать. Затем в jquery вы перепишете строку: before и tinyline: после стиля, который вы написали ранее, добавив относительный класс к элементу.

Answer 2

Посмотрите на это.

Я прошел через каждый div и применил его цвет к своему ребенку.

$(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 3

Скажите, хорошо ли этот ответ?

$(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 
 
    } 
 
} 
 
});

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>