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 相关文章推荐
jQuery性能优化的38个建议
Mar 04 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
jQuery实现的分页插件完整示例
May 26 jQuery
微信小程序学习总结(五)常见问题实例小结
Jun 04 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
PHPMailer邮件发送的实现代码
2013/05/04 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
Javascript引用指针使用介绍
2012/11/07 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
Python代码实现KNN算法
2017/12/20 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
利用python在excel中画图的实现方法
2020/03/17 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
介绍一下Linux文件的记录形式
2012/04/18 面试题
什么是会话Bean
2015/05/14 面试题
2014年班主任自我评价范文
2014/04/23 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python
windows server2008 开启端口的实现方法
2022/06/25 Servers