Jquery用列表制作彩虹图案

jquery make rainbow pattern with list

本文关键字：彩虹 列表 Jquery      更新时间：2023-09-26

my html

<div id="mainMenu">
    <span>Thing 1</span>
    <span>Thing 2</span>
    <span>Thing 3</span>
    <span>Thing 4</span>
    <span>Thing 5</span>
    <span>Thing 6</span>
    <span>Thing 7</span>
</div>

我怎样才能让物体6和物体7有颜色?它停在它们前面，因为它做了1-5

colors = ['red','orange','yellow','green', 'blue']; //roygbiv
$('#mainMenu span').each(function(i){
    this.style.color = colors[i];
});

换行:

this.style.color = colors[i % colors.length];

表达式i % colors.length产生两个操作数相除后的余数，并且始终在[0, colors.length)的范围内。它也被称为模算子。

一个更简洁的版本:

$('#mainMenu span').css('color', function(index) {
    return colors[index % colors.length];
});

参见:

  • css(propertyName, function(index,value))
相关文章：