Question

我从for loop构造一个有序列表，并为循环中的每个项目获取颜色十六进制值。我想使用项目颜色圈出数字。

JS位：

var MY_COLORS = ['#8b0000', '#555','#666','#777', '#008b00', ....];

for (var i = 0, len = items.length; i < len; i++) {
    list +="<li>"+  "<div style='background-color:"+MY_COLORS[i]+";width: 25px; height: 25px;border-radius:50%'></div>" + items[i]+"</li>";
}
$("#myList").append(list)

html位：

<div class="panel">
    <ol id="myList"></ol>
</div>

我希望我的数字是这样的： http://jsfiddle.net/j2gK8/
但颜色应取自循环内的MY_COLORS[i]。如何构建我的列表并将其传递给div元素，以便数字按照说明着色？

Answer 1

您可以使用解决方案http://jsfiddle.net/j2gK8/882/

＆＃13;

var MY_COLORS = ['green', 'red', 'blue', 'orange', 'black']

$('ol li').each(function(i){
	$(this).find('.circle').css({
  	background: MY_COLORS[i]
  }).html( i+1);
});

＆＃13;

ol {
    display: block;
    padding: 0 0 0 26px;
    list-style: none;
    background: #ccc;
    overflow: hidden;
    counter-reset: numList;
}
ol li {
    width: 176px;
    margin-right: 44px;
    float: left;
    position: relative
}
.circle {
    counter-increment: numList;
    content: counter(numList);
    
    float: left;
    position: absolute;
    left: -26px;
    
    font: bold 12px sans-serif;
    text-align: center;
    color: #fff;
    line-height: 18px;
    
    width: 18px; height: 18px;
    background: #f0f;
    
    -moz-border-radius: 999px;
    border-radius: 999px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
    <li><div class="circle">
    
    </div>List item number one has some text to go along with it.</li>
    <li><div class="circle">
    
    </div>List item number two has some text to go along with it as well.</li>
    <li><div class="circle">
    
    </div>List item number three has some text to go along with it too, what did you expect?</li>
    <li><div class="circle">
    
    </div>List item number three has some text to go along with it too, what did you expect?</li>
    <li><div class="circle">
    
    </div>List item number three has some text to go along with it too, what did you expect?</li>
    
</ol>

＆＃13;

您无法使用JavaScript或jQuery定位伪元素。所以你需要一个解决方法。

我添加了一个带有圈类的div，并在Javascript中操作了背景颜色和文本

希望这会对你有帮助!!!

Answer 2

＆＃13;

var MY_COLORS = ['#8b0000', '#555', '#666', '#777', '#008b00'];
var items = ['1', '2', '3', '4', '5'];
var list = "";
for (var i = 0, len = items.length; i < len; i++) {
  list += "<li>" + "<div style='background-color:" + MY_COLORS[i] + ";width: 25px; height: 25px;border-radius:50%;text-align:center;color:#fff'>"+items[i] + "</div></li>";
}
$("#myList").append(list);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">
  <ol id="myList"></ol>
</div>

＆＃13;

var MY_COLORS = ['#8b0000', '#555', '#666', '#777', '#008b00'];
var items = ['item1', 'item2', 'item3', 'item4', 'item5'];
var list = "";
for (var i = 0, len = items.length; i < len; i++) {
  list += "<li>" + "<div style='background-color:" + MY_COLORS[i] + ";width: 25px; height: 25px;border-radius:50%'></div>" +"<span style='color:"+MY_COLORS[i]+";'>"+items[i]+"</span>" + "</li>";
}
$("#myList").append(list);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">
  <ol id="myList"></ol>
</div>

＆＃13;

修改自@Abhishek Pandey，这是你想要实现的吗？

javascript for循环构造有序列表，数字上带有彩色圆圈

2 个答案: