我从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元素,以便数字按照说明着色?
答案 0 :(得分:1)
您可以使用解决方案http://jsfiddle.net/j2gK8/882/
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中操作了背景颜色和文本
希望这会对你有帮助!!!
答案 1 :(得分:0)
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, 这是你想要实现的吗?