请教JS 循环LI命名CALSS，JQ也可以

luomp3 2012-08-21 09:37:27

<ul>
<li class="li1"><a href="">热门新闻1.......</</a></li>
<li class="li2"><a href="">热门新闻2.......</a></li>
<li class="li3"><a href="">热门新闻3.......</</a></li>
</ul>

因为中间LI是从数据库读取的，但CSS又要每个LI的样式不一样（比如前面要加从1到10的数字图片），现在想用JS或者JQ写个循环把LI的值加上去，请问这个怎么写？或者有其他的方法和思路也可以，

...全文

351 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

jibai4444 2013-05-15

打赏
举报

<ul> <li class="li1"><a href="">热门新闻1.......</</a></li> <li class="li1"><a href="">热门新闻2.......</a></li> <li class="li1"><a href="">热门新闻3.......</</a></li> <li class="li1"><a href="">热门新闻4.......</a></li> <li class="li1"><a href="">热门新闻5.......</</a></li> <li class="li1"><a href="">热门新闻6.......</a></li> <li class="li3"><a href="">热门新闻7.......</</a></li> </ul> 这种情况呢？

KK3K2005 2013-05-15

打赏
举报

引用 10 楼 jibai4444 的回复:

<ul> <li class="li1"><a href="">热门新闻1.......</</a></li> <li class="li1"><a href="">热门新闻2.......</a></li> <li class="li1"><a href="">热门新闻3.......</</a></li> <li class="li1"><a href="">热门新闻4.......</a></li> <li class="li1"><a href="">热门新闻5.......</</a></li> <li class="li1"><a href="">热门新闻6.......</a></li> <li class="li3"><a href="">热门新闻7.......</</a></li> </ul> 这种情况呢？

我就换个人来做

一天要饭生活又开始啦 2013-05-15

打赏
举报

document.getElementsByTagName('ul')[0].getElementsByTagName('li')[0].style.background = ; document.getElementsByTagName('ul')[0].getElementsByTagName('li')[1].style.background = ; document.getElementsByTagName('ul')[0].getElementsByTagName('li')[2].style.background = ; document.getElementsByTagName('ul')[0].getElementsByTagName('li')[3].style.background = ; document.getElementsByTagName('ul')[0].getElementsByTagName('li')[4].style.background = ;

一天要饭生活又开始啦 2013-05-15

打赏
举报

document.getElementsByTagName('ul')[0].getElementsByTagName('li')[0].style.background = ; document.getElementsByTagName('ul')[1].getElementsByTagName('li')[0].style.background = ; document.getElementsByTagName('ul')[2].getElementsByTagName('li')[0].style.background = ; document.getElementsByTagName('ul')[3].getElementsByTagName('li')[0].style.background = ; document.getElementsByTagName('ul')[4].getElementsByTagName('li')[0].style.background = ;

泡泡鱼_ 2012-08-21

打赏
举报

//第1种：清除之前的样式，变更为最新的样式
$("ul li").removeClass().addClass(function(i){return "li" + (i + 1);})
//第2种:直接附加新的样式
$("ul li").addClass(function(i){return "li" + (i + 1);})

豪情 2012-08-21

打赏
举报

[Quote=引用 6 楼的回复:]

//第1种：清除之前的样式，变更为最新的样式
$("ul li").removeClass().addClass(function(i){return "li" + (i + 1);})
//第2种:直接附加新的样式
$("ul li").addClass(function(i){return "li" + (i + 1);})
[/Quote]
相当给力的说。顶一个。

NocturneLLJ 2012-08-21

打赏
举报



$("ul li").each(function (i) {

    var _class = "li" + (i + 1);

    $(this).addClass(_class);

});

NocturneLLJ 2012-08-21

打赏
举报



$("ul li").each(function (i) {

    var _class = "li" + (i + 1);

    $(this).addClass(_class);

});

泡泡鱼_ 2012-08-21

打赏
举报

[Quote=引用楼主的回复:]
<ul>
<li class="li1"><a href="">热门新闻1.......</</a></li>
<li class="li2"><a href="">热门新闻2.......</a></li>
<li class="li3"><a href="">热门新闻3.......</</a></li>
</ul>

因为中间LI是从数据库读取的，但CSS又要每个LI的样式不一……
[/Quote]
就你发的这个DOM结构就完全可以，你实际又要变成什么样子，就只有你知道了

lirenniao 2012-08-21

打赏
举报

$(function(){

 $("ul li").each(function(i){

   $(this).attr("class","li"+(i+1));

});

})

ludonglue 2012-08-21

打赏
举报

$("li").addClass()吗？

l245319872 2012-08-21

打赏
举报

<%
for i = 1 to Num
%>
<li class="li<%=i%>"><a href="">热门新闻1.......</</a></li>
<li class="li<%=i%>"><a href="">热门新闻2.......</</a></li>
<li class="li<%=i%>"><a href="">热门新闻3.......</</a></li>
<%
next
%>
比如前面要加从1到10的数字图片 == 这样的东西最好能控制在切图的环节上，好比，把所有小图标都切成一个背景图片等等，用JS控制这么简单的东西，有点浪费了。

luomp3 2012-08-21