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
– Jason P, Commented Apr 22, 2014 at 14:59

Venkata Krishna · Accepted Answer · 2014-04-22 15:00:38Z

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, 2014 at 15:00

Venkata Krishna

15.2k5 gold badges45 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GʀᴜᴍᴘʏCᴀᴛ Over a year ago

+1 I didnt see the extra , at the end of the array()

Venkata Krishna Over a year ago

You don't need a comma after this "E4E6A2",

tjati · Accepted Answer · 2014-04-22 15:57:49Z

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, 2014 at 15:57

answered Apr 22, 2014 at 14:56

tjati

6,1166 gold badges47 silver badges62 bronze badges

2 Comments

GʀᴜᴍᴘʏCᴀᴛ Over a year ago

Thanks for the help! Do you mind explaining what the e does?

tjati Over a year ago

I updated my answer and hope you can understand it better, now. If not, just ask! :)

Grinn · Accepted Answer · 2014-04-22 15:06:55Z

1

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.

edited Apr 22, 2014 at 15:06

answered Apr 22, 2014 at 15:01

Grinn

5,56340 silver badges52 bronze badges

Comments

T.CK · Accepted Answer · 2018-11-17 21:00:18Z

0

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>');
 });

answered Nov 17, 2018 at 21:00

T.CK

4214 silver badges6 bronze badges

Collectives™ on Stack Overflow

Display array into span with jQuery

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related