jquery 标签 隔若干行加空白或者加虚线的方法


Posted in Javascript onDecember 07, 2016

实例如下:

$(function () {
$('ul li').addClass(function (i) { return i % 6 == 5 ? "ab" : ""; });  // 隔6行 加空白。或者加虚线


$('.imglist li').after(function (i) {
var css = "";
if (i % 3 == 2) {
css = "<div class='dashed clear' ></div>";
}
return css;
}); //图片列表photo.html 隔3行 虚线

});

i 是 <li>的索引号,从0开始

图片隔三行加虚线,最后一行去掉虚线,还可以这样

//方法一:
  jQuery(document).ready(function () {
    var NewUL = jQuery(".photo_list ul li");
    for (var i = 0; i < NewUL.length; i++) {
      if ((i + 1) % 3 == 0) {
        NewUL.eq(i).after("<li class=\"photo_space\"></li>");
      }
    }
    $(".photo_list li:last").css("border-bottom", "none");
  })
.ab

{

height:80px;

}
.dashed{border-bottom:1px dashed #b9c3c7;padding-bottom:10px;margin-bottom:10px}
.clear{clear:both}
.imglist ul li {text-align:center;line-height:25px;float:left}

 jquery 标签 隔若干行加空白或者加虚线的方法

jquery 标签 隔若干行加空白或者加虚线的方法

以上这篇jquery li标签 隔若干行加空白或者加虚线的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基础的prototype.js常用函数及其用法
Mar 10 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 Javascript
浅析js的模块化编写 require.js
Dec 07 #Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 #Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 #Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 #Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 #Javascript
jquery插入兄弟节点的操作方法
Dec 07 #Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 #Javascript
You might like
PHP 批量删除 sql语句
2009/06/05 PHP
php使用codebase生成随机数
2014/03/25 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
PHP Reflection API详解
2015/05/12 PHP
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
web.py获取上传文件名的正确方法
2014/08/26 Python
python中self原理实例分析
2015/04/30 Python
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
python中的计时器timeit的使用方法
2017/10/20 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
python基于property()函数定义属性
2020/01/22 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
实习生个人找工作的自我评价
2013/10/30 职场文书
骨干教师培训感言
2014/01/16 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电