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>

Answer 2

this回调函数中的

css引用p元素而不是div元素。您可以使用each回调的第二个参数。

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

另一种选择是：

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

Answer 3

是的，我也意识到了。这可行但你的也是

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

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

3 个答案: