How can i display color below each div on loading page using jquery?

Question

I have created 4 div and gave color to each div, now i want color of each displaying below each div, i am having hexadecimal values for each div but it only displays when i click on it, i want color for each div below each div on loading the page. Please help.

Please help me with the solution using jquery only.

$(function() {
  $("div").click(function() {
    var color = $(this).css("background-color");
    $("#rgbresult").html(color);
    var hex = rgb2hex(color);
    $('#hexaresult').html(hex);
  });
});

function rgb2hex(orig) {
  var rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+)/i);
  return (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;
}

#first {
  background-color: red;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#second {
  background-color: green;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#third {
  background-color: yellow;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#fourth {
  background-color: blue;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#flip,
#slide {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#slide {
  padding: 50px;
  display: none;
}

p {
  margin-top: 20px;
  padding: 5px;
  border: 2px solid #666;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first" style="position: relative;">
</div>

<div id="second" style="position: relative;">
</div>

<div id="third" style="position: relative;">
</div>

<div id="fourth" style="position: relative;">
</div>

<p id="rgbresult"> </p>
<p id="hexaresult"> </p>

Answer 1

1. Use class and have each resulting div next to each div then use .next() to point the corresponding div result with this context

$("div").click(function() {
  var color = $(this).css("background-color");
  $(this).next(".rgbresult").html(color);
  var hex = rgb2hex(color);
  $(this).next().next(".hexaresult").html(hex);
});

$("div").each(function() {
  var color = $(this).css("background-color");
  $(this).next(".rgbresult").html(color);
  var hex = rgb2hex(color);
  $(this).next().next(".hexaresult").html(hex);
})




function rgb2hex(orig) {
  var rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+)/i);
  return (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;
}

#first {
  background-color: red;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#second {
  background-color: green;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#third {
  background-color: yellow;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#fourth {
  background-color: blue;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#flip,
#slide {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#slide {
  padding: 50px;
  display: none;
}

p {
  margin-top: 20px;
  padding: 5px;
  border: 2px solid #666;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first" style="position: relative;">
</div>
<p class="rgbresult"> </p>
<p class="hexaresult"> </p>
<div id="second" style="position: relative;">
</div>
<p class="rgbresult"> </p>
<p class="hexaresult"> </p>
<div id="third" style="position: relative;">
</div>
<p class="rgbresult"> </p>
<p class="hexaresult"> </p>
<div id="fourth" style="position: relative;">
</div>

<p class="rgbresult"> </p>
<p class="hexaresult"> </p>

Answer 2

You need to trigger any one color box click event onload

For all Single

$(function() {
  $("div").click(function() {
    var color = $(this).css("background-color");
    $("#rgbresult").html(color);
    var hex = rgb2hex(color);
    $('#hexaresult').html(hex);
  });
  $('#first').trigger('click');
  
});

function rgb2hex(orig) {
  var rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+)/i);
  return (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;
}

#first {
  background-color: red;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#second {
  background-color: green;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#third {
  background-color: yellow;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#fourth {
  background-color: blue;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#flip,
#slide {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#slide {
  padding: 50px;
  display: none;
}

p {
  margin-top: 20px;
  padding: 5px;
  border: 2px solid #666;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first" style="position: relative;">
</div>

<div id="second" style="position: relative;">
</div>

<div id="third" style="position: relative;">
</div>

<div id="fourth" style="position: relative;">
</div>

<p id="rgbresult"> </p>
<p id="hexaresult"> </p>

For All

var cl  = $('div').map(function(){
          var color = $(this).css("background-color");
         return ({before:color,after:rgb2hex(color)});
      }).get();

       $("#rgbresult").html(cl.map(a=> a.before).join(','));
        $('#hexaresult').html(cl.map(a=> a.after).join(','));

$(function() {
  $("div").click(function() {
    var color = $(this).css("background-color");
    $("#rgbresult").html(color);
    var hex = rgb2hex(color);
    $('#hexaresult').html(hex);
  });
   
   var cl  = $('div').map(function(){
      var color = $(this).css("background-color");
     return ({before:color,after:rgb2hex(color)});
  }).get();
  
   $("#rgbresult").html(cl.map(a=> a.before).join(','));
    $('#hexaresult').html(cl.map(a=> a.after).join(','));
});

function rgb2hex(orig) {
  var rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+)/i);
  return (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;
}

#first {
  background-color: red;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#second {
  background-color: green;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#third {
  background-color: yellow;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#fourth {
  background-color: blue;
  height: 50px;
  width: 50px;
  /*display: none;*/
}

#flip,
#slide {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#slide {
  padding: 50px;
  display: none;
}

p {
  margin-top: 20px;
  padding: 5px;
  border: 2px solid #666;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first" style="position: relative;">
</div>

<div id="second" style="position: relative;">
</div>

<div id="third" style="position: relative;">
</div>

<div id="fourth" style="position: relative;">
</div>

<p id="rgbresult"> </p>
<p id="hexaresult"> </p>