Set background-color of <div> as the hex-text text inside

Question

I have several divs as follows in my HTML code:

<div>#558C89</div>

and I want the background of the every div to have the value it holds. I came up with a script that does that, but only when div is clicked:

$(document).ready(function() {
    $(document).on('click', 'div', function() {
        $(this).css('background-color', $(this).text());
    });
});

I'm total beginner in JavaScript and jQuery and I'm not sure if it is even the correct approach. I want those divs to have background colors set already when the page is loaded.

Answer 1

Use .each() to iterate through each <div> and use .text() to extract the hex color code.

$(document).ready(function () {
   $('div').each(function () {
     $(this).css('background-color', $(this).text());
   })
});

jsFiddle