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宝典学习笔记(下)
Jan 10 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
JavaScript获取某一天所在的星期
Sep 05 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 Javascript
ant design charts 获取后端接口数据展示
May 25 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边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
python单例模式实例解析
2018/08/28 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
python实现名片管理器的示例代码
2019/12/17 Python
python实现批量转换图片为黑白
2020/06/16 Python
如何表示python中的相对路径
2020/07/08 Python
Python读取yaml文件的详细教程
2020/07/21 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
2014年乡镇植树节活动方案
2014/02/28 职场文书
置业顾问岗位职责
2014/03/02 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
2015年采购部工作总结
2015/04/23 职场文书
舞出我人生观后感
2015/06/16 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby
Mysql开启外网访问
2022/05/15 MySQL