如何建立一个数组并依次赋值

fanpeng 发布于 2011/06/16 12:47
阅读 1K+
收藏 0
我建立了一个色彩数值的数组,想把3个值依次赋3个li的class
查了半天资料,可能用each遍历,但是也没搞明白,请高手帮忙看看:
非常感谢
<script type="text/javascript">
$(function() {
var color_array = ["#b0b0b0", "#13afd7", "#f0d027"];  
$.each(color_array, function(i,wal){
//print(i);
//print(wal);
$("li").css("color",'"这里不知道怎么写了? '");
});

})
</script>
<div>
<ul>
<li>li1</li>
<li>li2</li>
                <li>li2</li>
</ul>
</div>
加载中
0
烈冰
烈冰
$('li').each(function(i){
  $(this).css('color',color_array[i]);
});

0
f
fanpeng
多谢楼上的朋友
0
f
fanpeng

如果增加点难度,希望当前页单独标记出来的,应该怎么写?

<script type="text/javascript">

 $(function() {

 var color_array = ["#b0b0b0", "#13afd7", "#f0d027"];  

 $('li').each(function(i){

 $(this).css('color',color_array[i]);

 $(this).siblings(".current").css('border',1px solid color_array[i]);//这块肯定写的不对,该怎么写?

 });

 })

</script>

<div>

 <ul>

 <li>li1</li>

 <li class="current">li2</li>

 <li>li3</li>

 </ul>

</div>
0
烈冰
烈冰

引用来自“fanpeng”的答案

如果增加点难度,希望当前页单独标记出来的,应该怎么写?

<script type="text/javascript">

 $(function() {

 var color_array = ["#b0b0b0", "#13afd7", "#f0d027"];  

 $('li').each(function(i){

 $(this).css('color',color_array[i]);

 $(this).siblings(".current").css('border',1px solid color_array[i]);//这块肯定写的不对,该怎么写?

 });

 })

</script>

<div>

 <ul>

 <li>li1</li>

 <li class="current">li2</li>

 <li>li3</li>

 </ul>

</div>

在each循环后写

$('li.current').css('border','1px solid');
也没什么难度……
0
f
fanpeng

多谢,再帮忙看看这个吧,当前页采用相应颜色的背景图,该怎么表达 

http://www.uiueux.com/test/4.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD> 
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
li{ list-style:none; float:left;}
</style>
<TITLE> New Document </TITLE>
</HEAD>
<body>
<script type="text/javascript">
	$(function() {
		var color_array = ["#b0b0b0", "#13afd7", "#f0d027","#ff801a","#1ce021"];  
		$(".menu>li").each(function(i){
			$(this).find("a").css('color',color_array[i]);		
			$(this).hover(function(){
				$(this).children("a").css('background','url(img/topmenubg'+i+'.gif) repeat');
			},function(){
				$(this).children("a").css('background','none');
			});	
		});
		$('.menu>li.current_page_item>a').css('background','url(img/topmenubg'+i+'.gif) repeat');//此处不知道怎么写

		})	
</script>
<div>
	<ul class="menu">
		<li><a href="#">Item1</a></li>
		<li><a href="#">Item2</a></li>
		<li class="current_page_item"><a href="#">Item3</a></li>
		<li><a href="#">Item4</a></li>
		<li><a href="#">Item5</a></li>
	</ul>
</div>
 </BODY>
</HTML>
0
f
fanpeng

补充问题:

http://www.uiueux.com/test/4.html

<li class="current_page_item">调用的背景图不对,应该是浅黄色

返回顶部
顶部