js中循环li元素

㈠ js中的for循环输出，怎么输出到html中的指定位置 循环li

准备的材料有：计算机、浏览器、html编辑器。

一、首先，打开html编辑器，创建一个新的html文件，比如index.html，并编写问题的基本代码。

㈡ JS效果：3个不同颜色的li不断循环，怎么做

<meta charset="utf-8" />
如果出现乱码请把utf-8设置为gbk<br />
<style type="text/css">
/*先定义三个颜色类*/
.ys1{background-color:#f00;}
.ys2{background-color:#0f0;}
.ys3{background-color:#00f;}
</style>
ok颜色样式有了
<br />
来，做个输入框<br />
这位仁兄，你要打印多少
<input type="text" id="n" value="10" />
<input type="button" value="开始打印" onclick="print()" />
<br />
给编辑框加id(我设置为n),方便等会取数量
<br />
给按钮加上事件，被单击调用print()
<br />
接下来我们开始写print()
<br />
。。等会忘了，在加个标签(id=rs)用来显示结果
<br />
<ol id="rs"></ol>
<script type="text/javascript">
function print(){
//创建一个print()
//1.取出打印数量赋值给变量$n
var $n=document.getElementById("n").value;
//好，提示一把看看有没有成功
alert("哥，你想打印"+$n+"个li,没事，一定要是整数哦！还有别输几万，免得你机器顶不住");

//来，创建样式类名数组用来作为等会给li赋值类名
var $style=["ys1","ys2","ys3"];//就是我们刚刚定义的样式
var $z=0;//初始化为0，让他指向数组第一个元素
//在定义一个变量存放结果
var $rs="";//初始化为空
//要让他循环$n次
for(var $i=0;$i<$n;$i++){
if($z==$style.length){
//判断指针是否指到外面去了。。。这里一定要好好理解
$z=0;
}
$rs+='<li class="'+$style[$z]+'">';
$rs+="这是第"+($i+1)+"个li,这个时候这个li的累名为"+$style[$z]+"</li>";
$z++;//自身加1
}
//好循环完成，结果在$rs中
document.getElementById("rs").innerHTML=$rs;

}
</script>

㈢ 如何在js中循环赋值给页面上的li标签

functionsetValue(){
varitems=document.getElementByTagName("li");//获取li集合
for(vari=0;i<items.length;i++){
varcurr=items[i];//获取当前li
curr.innerHtml="li内容";//为当前li赋值

//如果是li赋值不同，则需要进行判断
}
}

㈣ js给循环中的li添加class="active"

1、首先在html中布抄局好两个按钮和一个袭div，如下图所示。

㈤ 如何在js中循环赋值给页面上的li标签

<script>var arrs="应用1,应用2,应用3,应用4,应用5,应用6,应用7,应用8,应用9";function ok(){ var ars=arrs.split(","); var html=""; for(var i=0;i<ars.length;i++){ html+="<li><a href='#'>"+ars[i]+"</a></li>
"; } document.getElementById("inf").innerHTML=html;}</script>

㈥ js数组处理数组以li形式循环显示

<divid=test></div>
<script>
arr=[[
{'n':'A','q':'111111'},
{'n':'B','q':'222222'},
],[
{'n':'A','q':'333333'},
{'n':'B','q':'444444'},
]];
document.getElementById("test").innerHTML=arr.map(function(o,i){
return'数组'+(i+1)+'<ulclass="box1">'+o.map(function(o){
return'<lidata-q="'+o.n+'">'+o.q+'</li>';
}).join('')+'</ul>';
}).join('');
</script>