Question

我正在尝试获取每个div的rgb和索引值。在控制台中，我一切正确（索引和B 每个div的背景颜色）。尝试将每个值添加到每个 div 中的 p 中，我只有每个 div 重复的最后一个值：蓝色的十六进制和数字5，我该怎么解决？

.red {
    background-color:red; 
}.orange {
    background-color:orange; 
}
.yellow {
    background-color:yellow; 
}
.purple {
    background-color:purple; 
}
.blue {
    background-color:blue; 
}
<div class="red"><p></p></div>
<div class="orange"><p></p></div>
<div class="yellow"><p></p></div>
<div class="purple"><p></p></div>
<div class="blue"><p></p></div>

$('div').each(function(index) {
  var x = $(this).css('background-color');
  $("div p").text(index+x);
  console.log(index+x);
});

[日志] rgb（255，0，0）＃ff0000
[日志] rgb（255，165，0）＃ffa500
[日志] rgb（255，255，0）＃ffff00
[Log] rgb（128，0，128）＃800080
[日志] rgb（0，0，255）＃0000ff

Answer 1

更改以下内容...

$("div p").text(index+x);

致...

$(this).find("p").text(index+x);

目前，您将再次找到所有<div>个元素，并在每个元素中填充<p> ...这就是为什么您看到所有元素都具有最终值的原因

$('div').each(function(index) {
  var x = $(this).css('background-color');
  $(this).find("p").text(index+x);
  console.log(index+x);
});

.red {
    background-color:red; 
}.orange {
    background-color:orange; 
}
.yellow {
    background-color:yellow; 
}
.purple {
    background-color:purple; 
}
.blue {
    background-color:blue; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="red"><p></p></div>
<div class="orange"><p></p></div>
<div class="yellow"><p></p></div>
<div class="purple"><p></p></div>
<div class="blue"><p></p></div>

Answer 2

基本上，您具有正确的功能，但需要使用.eq（index）来实际实现foreach函数中的特定索引。这类似于访问数组中的索引，例如randomArray（0）=> 1。

jpeg ("Plot3.jpeg", width = 658, height = 555, quality = 300)
plot (IO)
dev.off ()

$('div').each(function(index) {
  var x = $(this).css('background-color');
  $("div p").eq(index).text(index+x);
  console.log(index+x);
});

.red {
    background-color:red; 
}

.cyan {
  background-color:cyan;
}

.green {
  background-color:green;
}

使用jQuery迭代每个div属性？

2 个答案: