Javascript 如何使用jquery在加载页面上显示每个div下面的颜色？

我已经创建了4个div并为每个div指定了颜色，现在我想要每个div下面显示的每个div的颜色，每个div都有十六进制的值，但它只在我单击它时显示，我想要加载页面时每个div下面的每个div的颜色。请帮忙

请仅使用jquery帮助我解决此问题

$（函数（）{
$（“div”）。单击（函数（）{
var color=$（this.css（“背景色”）；
$（“#rgbresult”）.html（彩色）；
var hex=rgb2hex（颜色）；
$（'#hexaresult'）.html（十六进制）；
});
});
函数rgb2hex（orig）{
var rgb=原始替换（/\s/g'）。匹配（/^rgba？\（\d+），（\d+），（\d+），（\d+）/i）；
返回（rgb&&rgb.length==4）？“#”+
（“0”+parseInt（rgb[1]，10）.toString（16））.slice（-2）+
（“0”+parseInt（rgb[2]，10）.toString（16））.slice（-2）+
（“0”+parseInt（rgb[3]，10）.toString（16））.slice（-2）：orig；
}

#首先{
背景色：红色；
高度：50px；
宽度：50px；
/*显示：无*/
}
#第二{
背景颜色：绿色；
高度：50px；
宽度：50px；
/*显示：无*/
}
#第三{
背景颜色：黄色；
高度：50px；
宽度：50px；
/*显示：无*/
}
#第四{
背景颜色：蓝色；
高度：50px；
宽度：50px；
/*显示：无*/
}
#翻转，
#滑梯{
填充物：5px；
文本对齐：居中；
背景色：#e5eecc；
边框：实心1px#c3c3；
}
#滑梯{
填充：50px；
显示：无；
}
p{
边缘顶部：20px；
填充物：5px；
边框：2个实心#666；
}

您需要触发任何一个颜色框单击事件加载

适用于所有单曲

$（函数（）{
$（“div”）。单击（函数（）{
var color=$（this.css（“背景色”）；
$（“#rgbresult”）.html（彩色）；
var hex=rgb2hex（颜色）；
$（'#hexaresult'）.html（十六进制）；
});
$（'first'）。触发器（'click'）；
});
函数rgb2hex（orig）{
var rgb=原始替换（/\s/g'）。匹配（/^rgba？\（\d+），（\d+），（\d+），（\d+）/i）；
返回（rgb&&rgb.length==4）？“#”+
（“0”+parseInt（rgb[1]，10）.toString（16））.slice（-2）+
（“0”+parseInt（rgb[2]，10）.toString（16））.slice（-2）+
（“0”+parseInt（rgb[3]，10）.toString（16））.slice（-2）：orig；
}

#首先{
背景色：红色；
高度：50px；
宽度：50px；
/*显示：无*/
}
#第二{
背景颜色：绿色；
高度：50px；
宽度：50px；
/*显示：无*/
}
#第三{
背景颜色：黄色；
高度：50px；
宽度：50px；
/*显示：无*/
}
#第四{
背景颜色：蓝色；
高度：50px；
宽度：50px；
/*显示：无*/
}
#翻转，
#滑梯{
填充物：5px；
文本对齐：居中；
背景色：#e5eecc；
边框：实心1px#c3c3；
}
#滑梯{
填充：50px；
显示：无；
}
p{
边缘顶部：20px；
填充物：5px；
边框：2个实心#666；
}

使用类并使每个结果div与每个div相邻，然后使用.next（）将相应的div结果指向此上下文

$（“div”）。单击（函数（）{
var color=$（this.css（“背景色”）；
$（this.next（“.rgbresult”）.html（颜色）；
var hex=rgb2hex（颜色）；
$（this.next（）.next（“.hexaresult”）.html（十六进制）；
});
$（“div”）。每个（函数（）{
var color=$（this.css（“背景色”）；
$（this.next（“.rgbresult”）.html（颜色）；
var hex=rgb2hex（颜色）；
$（this.next（）.next（“.hexaresult”）.html（十六进制）；
})
函数rgb2hex（orig）{
var rgb=原始替换（/\s/g'）。匹配（/^rgba？\（\d+），（\d+），（\d+），（\d+）/i）；
返回（rgb&&rgb.length==4）？“#”+
（“0”+parseInt（rgb[1]，10）.toString（16））.slice（-2）+
（“0”+parseInt（rgb[2]，10）.toString（16））.slice（-2）+
（“0”+parseInt（rgb[3]，10）.toString（16））.slice（-2）：orig；
}

#首先{
背景色：红色；
高度：50px；
宽度：50px；
/*显示：无*/
}
#第二{
背景颜色：绿色；
高度：50px；
宽度：50px；
/*显示：无*/
}
#第三{
背景颜色：黄色；
高度：50px；
宽度：50px；
/*显示：无*/
}
#第四{
背景颜色：蓝色；
高度：50px；
宽度：50px；
/*显示：无*/
}
#翻转，
#滑梯{
填充物：5px；
文本对齐：居中；
背景色：#e5eecc；
边框：实心1px#c3c3；
}
#滑梯{
填充：50px；
显示：无；
}
p{
边缘顶部：20px；
填充物：5px；
边框：2个实心#666；
}

$（“urdiv id”）。触发器（'click'）；在页面loadyes上。每次单击文本框中的“替换旧的”时，它们都会被删除。这就是为什么我只使用第一个