javascript - 如何获得 parent 的值(value)

Question

如您所见，我有多个 .box div 并且我的 .box div 具有我需要的 data-item-color 属性获取 data-item-color 值来更改我的 .box css 属性 (.line,.tinyline,h6,p)，很快:

如果我的 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

看看这个。

我遍历了每个 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>