jquery:从data-attribute设置子元素颜色

Question

知道如何使这项工作？

$("div[data-color]").each(function() {
    $(this).children('p').css('color', function () {
        return $(this).data('color')
    });
});

结构看起来像

<div data-color="#ff0000"><p>text that needs right color</p></div>

Answer 1

内部不需要那个回调函数this指的p不是div.

$("div[data-color]").each(function() {
    $(this).children('p').css('color', $(this).data('color'))
});

$("div[data-color]").each(function() {
  $(this).children('p').css('color', $(this).data('color'))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-color="#ff0000">
  <p>text that needs right color</p>
</div>

或者像回调那样做

$("div[data-color] > p").css('color',function(){
    return $(this).parent().data('color');
    // or return this.parentNode.dataset.color
});

$("div[data-color] > p").css('color', function() {
  return $(this).parent().data('color');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-color="#ff0000">
  <p>text that needs right color</p>
</div>

使用纯JavaScript使用querySelectorAll和Array#forEach方法

Array.from(document.querySelectorAll("div[data-color] > p")).forEach(function(ele) {
  ele.style.color = ele.parentNode.dataset.color;
});

Array.from(document.querySelectorAll("div[data-color] > p")).forEach(function(ele) {
  ele.style.color = ele.parentNode.dataset.color;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-color="#ff0000">
  <p>text that needs right color</p>
</div>