如何将此阵列中的正确数据放入我需要的位置？

Here's the idea, pull color hex codes that are supplied from the SQL and injected into the span in these list items and then use those hex codes to set the background color of the span it's in. I was able to get the proper information into the array but I'm not sure how I should go about setting the backgroundColor rule in the correct order with that array.

这是一个想法，从SQL提供的拉出颜色十六进制代码并注入这些列表项中的跨度，然后使用这些十六进制代码来设置它所在的跨度的背景颜色。我能够获得正确的信息到数组，但我不知道如何使用该数组以正确的顺序设置backgroundColor规则。

<ul id="color-hr">
        <li id="hr-aqua">
            <a href="Javascript:"><span></span></a>
            <ul>
                <li><a href="Javascript:"><span>70859a</span> Jetstream</a></li>
                <li><a href="Javascript:"><span>4d98b5</span> Periwinkle</a></li>
                <li><a href="Javascript:"><span>5ecfcc</span> Deep Caribean</a></li>
                <li><a href="Javascript:"><span>b6d8d5</span> Sky</a></li>
            </ul>
        </li>
</ul>

/** Color Bar **/
$("ul#color-hr > li > ul li a span").each(function (data, i) {
    $this = $(this);
    var colorArr = $this.map(function () { return $this.text() });
    var barColor = 0;

    for (var i = 0; i < colorArr.length; i++) {
        console.log(colorArr);
        $(this).css('backgroundColor', '#' + barColor);
    }

});

3 个解决方案

#1

There is no need to loop twice.

没有必要循环两次。

You can change your code to:

您可以将代码更改为：

$("ul#color-hr > li > ul li a span").each(function (data, i) {
    $this = $(this);

    $this.css('backgroundColor', '#' + $this.text());
});

#2

You don't need the inner loop.

你不需要内循环。

$("ul#color-hr > li > ul li a span").each(function (data, i) {
    $(this).css('backgroundColor', '#' + $(this).text())
});

Also, for reference, you may want to consider the HTML5 "data-" attribute. It's a little redundant in this case, but can come in handy.

另外，作为参考，您可能需要考虑HTML5“data-”属性。在这种情况下，这有点多余，但可以派上用场。

<li><a href="Javascript:"><span data-bg="#70859a">70859a</span> Jetstream</a></li>

...would use:

......会用：

 $(this).css('backgroundColor', $(this).data("bg"))

#3

You do not need the inner loop, as each already loops through them.

你不需要内循环，因为每个循环都已遍历它们。

//for (var i = 0; i < colorArr.length; i++) {
    //console.log(colorArr);
    $(this).css('backgroundColor', '#' + $this.text());
//}

Instead of using barColor that was equal to 0, I replaced it with the current iteration's text.

我没有使用等于0的barColor，而是将其替换为当前迭代的文本。

JSfiddle: http://jsfiddle.net/L6Hfn/3/

JSfiddle：http：//jsfiddle.net/L6Hfn/3/

#1