Question

尝试了解有关jQuery的更多信息我尝试将内联CSS显示为<span>时遇到了问题。我正在尝试取一个数组并显示如下：

<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 -->

我的阵列：

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

我试过了：

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

从article我假设：

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

和

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

我看了看：

将.css()添加到<span>但通过array我遇到问题。
使用.each()

但是，它无法正确渲染。是否有人在教我如何做错？

Answer 1

DEMO - ＆gt; http://jsfiddle.net/JBSKL/1/

使用您的代码..

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(""));

修复了一些问题

在您的数组中，最后还有一个额外的逗号,
在for循环中使用colorArray[i]代替colorArray
关闭for循环中的span标记。

Answer 2

试试这个：

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

each(index, element) - 函数迭代对象的所有元素，例如你的数组colorArray。

在我的示例中，i是第一个参数index的名称，只包含当前位置，从0开始。

第二个参数是element（或简称e，在我的示例中）并包含对象/列表/当前元素。在您的情况下：您的颜色代码。

Answer 3

也许更简洁的方法是使用内置的css函数。此外，您应该构建您的跨度集合，然后将它们一次性附加到DOM，从而最大限度地减少DOM操作的数量：

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

这里是Codepen。

Answer 4

大多数时候，没有jQuery，生活会容易得多。

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

否则，使用jQuery：

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

使用jQuery将数组显示到span中

4 个答案: