Display array into span with jQuery

Question

Trying to learn more about jQuery I have run into an issue with trying to display an inline CSS into a <span>. I am trying to take an array and display it as followed:

<div class="colorbar">
    <span style="background: #A56AC2"></span>
    <span style="background: #E2CED7"></span>
    <span style="background: #5E5992"></span>
    <span style="background: #E4E6A2"></span>
    <span style="background: #B45748"></span>
</div><!-- end .colorbar -->

My array:

var colorArray = new Array(
    "A56AC2",
    "E2CED7",
    "5E5992",
    "B45748",
    "E4E6A2"
);

Ive tried:

 $('.colorbar').html( '<span style="background: #' + colorArray. + (';</span>'));

From this article I assumed:

$('.colorbar').html( '<span style="background: #' + colorArray.join + (';</span>'));

and:

var addingHTML = [];
for ( var i=0; i < colorArray.length; i++ ) {
    addingHTML.push ('<span style="background: #' + colorArray + ';"');
}
$(".colorbar").html(addingHTML.join(""));

Ive looked into:

adding .css() to the <span> but going through the array Im having trouble.
using .each()

However, it is not rendering correctly. Does someone mind educating me on what I am doing wrong?

Your third try with the for loop was almost correct. It should be `colorArray[i]` to access just the item at index `i`. — Jason P, Apr 22 '14 at 14:59

score 2 · Answer 1 · answered Apr 22 '14 at 15:00

2

DEMO -> http://jsfiddle.net/JBSKL/1/

By using your code..

var colorArray = new Array("A56AC2", "E2CED7", "5E5992", "B45748", "E4E6A2");

var addingHTML = [];
for ( var i=0; i < colorArray.length; i++ ) {
    addingHTML.push ('<span style="background: #' + colorArray[i] + '">' + i + '</span>');
}
$(".colorbar").html(addingHTML.join(""));

Few issues fixed

In your array, you have an extra comma , at the end
Use colorArray[i] instead of colorArray in the for loop
Close span tag in your for loop.

answered Apr 22 '14 at 15:00

Venkata Krishna

14,926
5
42
56

+1 I didnt see the extra `,` at the end of the `array()` – DᴀʀᴛʜVᴀᴅᴇʀ Apr 22 '14 at 15:04
You don't need a comma after this `"E4E6A2",` – Venkata Krishna Apr 22 '14 at 15:05

tjati · Accepted Answer · 2014-04-22T15:57:49.413

1

Try this:

$(colorArray).each(function(i, e) {
    $('.colorbar').append('<span style="background: #' + e + '"></span>');
});

The each(index, element)-function iterates all elements of a object, in your case your array colorArray.

In my example i is my name for the first argument, index and just contains the current position, starting at 0.

The second argument is element (or short e, in my example) and contains the current element of your object/list/whatever. In your case: your color codes.

edited Apr 22 '14 at 15:57

answered Apr 22 '14 at 14:56

tjati

5,761
4
41
56

Thanks for the help! Do you mind explaining what the `e` does? – DᴀʀᴛʜVᴀᴅᴇʀ Apr 22 '14 at 15:51
1

I updated my answer and hope you can understand it better, now. If not, just ask! :) – tjati Apr 22 '14 at 15:58

Grinn · Answer 3 · 2014-04-22T15:06:55.200

Perhaps a cleaner approach would be to use the built-in css function. Also, you should build your collection of spans then append them all at once to the DOM, minimizing the number of DOM manipulations:

var colorArray = [
    "A56AC2",
    "E2CED7",
    "5E5992",
    "B45748",
    "E4E6A2"
];

$(function () {
  var $spans = new $();
  $.each(colorArray, function(i, e) {
      $spans = $spans.add($("<span>Howdy</span>").css("background-color", "#" + e));
  });

  $(".colorbar").append($spans);
});

Here the Codepen.

score 0 · Answer 4 · answered Nov 17 '18 at 21:00

Life can be much easier without jQuery most of the time.

 var colorArray = ["A56AC2", "E2CED7", "5E5992", "B45748", "E4E6A2"];
 colorArray.forEach(color => {
     document.querySelector('.colorbar').innerHTML += '<span style="background: #' + color + '"></span>';
 });

Otherwise, with jQuery:

 var colorArray = ["A56AC2", "E2CED7", "5E5992", "B45748", "E4E6A2"];
 colorArray.forEach(color => {
      $('.colorbar').html($('.colorbar').html() + '<span style="background: #' + color + '"></span>');
 });

Display array into span with jQuery

4 Answers4