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 相关文章推荐
JS 判断代码全收集
Apr 28 Javascript
Prototype String对象 学习
Jul 19 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
浅析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
Zend Framework分发器用法示例
2016/12/11 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
Python使用re模块验证危险字符
2020/05/21 Python
html5唤醒APP小记
2019/03/27 HTML / CSS
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
宠物店的创业计划书范文
2014/01/11 职场文书
30年同学聚会感言
2014/01/30 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
优乐美广告词
2014/03/14 职场文书
会计专业自荐书
2014/07/08 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
办理护照工作证明
2014/10/10 职场文书
慰问信格式规范
2015/03/23 职场文书