jQuery 每隔5个li插入分割线

5月 14, 2013 0 条评论 117 次阅读 0 人点赞

jQuery li

最近做一个拍卖会的前台页面的时候用到的,可以做成循环任意重复的class,比如说:li产品排列三行四列,li加了margin-right,但最后第四列不需要加margin-right就可以用到,也可以用于列表样式。具体代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    function separate_line(){
    	if(this.已经插入过了){
    	return;
    	}else
    	this.已经插入过了=1;
    	var li_all=$("#test li");
    	for(var i=0;i<li_all.length;i++){
    		if(i%5==0&&i>0){
    			li_all.eq(i).before('<li class="newline">................</li>');
    		}
    	}
        // 怎样在每隔5隔li插入一个    <li class="newline">................</li>
    }
</script>
<style type="text/css">
    .newline{padding:5px}
</style>
</head>

<body>
<ul id="test">
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
</ul>
<button onclick="separate_line()">插入分割线</button>
</body>
</html>

孑愁

一个Microsoft、Google、Apple的爱好者综合体,喜欢一切和数码科技有关的东西,也希望能及时的把这些分享给关注它们的人。现就职于某互联网公司,担任前端

文章评论(0)